Jupyter Notebook iframe页面嵌入集成跨域处理、自定义工具栏、动态添加、读取单元格cell内容_mob604756efcf97的技术博客_

1、 iframe页面嵌入Jupyter Notebook跨域处理

采用nginx解决跨域访问问题，nginx.conf配置如下（http://192.168.1.230:9999 为Jupyter Notebook访问地址）：

upstream localhost {
        server localhost:81 weight=1;
    }

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
            http://localhost:80;
            proxy_pass http://localhost;
            proxy_connect_timeout 1;
            proxy_send_timeout 5;
            proxy_read_timeout 5;
        }

    location /tree{
            proxy_pass http://192.168.1.230:9999/tree;
    }

    location /login{
            proxy_pass http://192.168.1.230:9999/login;
    }

    location /static{
            proxy_pass http://192.168.1.230:9999/static;
    }

    location /api{
            proxy_pass http://192.168.1.230:9999/api;
    }

    location /notebooks{
            proxy_pass http://192.168.1.230:9999/notebooks;
    }

    location /edit{
            proxy_pass http://192.168.1.230:9999/edit;
    }

    location /nbextensions{
            proxy_pass http://192.168.1.230:9999/nbextensions;
    }

    location /custom{
            proxy_pass http://192.168.1.230:9999/custom;
    }
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
  function mytest(){

//动态读取Jupyter Notebook单元格cell内容
      var cell =  document.getElementById("myiframe").contentWindow.Jupyter.notebook.get_selected_cell();
      alert(cell.get_text());
      //动态添加Jupyter Notebook单元格cell
      var insertCell = document.getElementById("myiframe").contentWindow.Jupyter.notebook.insert_cell_below('code');
      insertCell.set_text("print(\"hello  my word\")");
      //cell.execute()
  }
</script>
</head>
<body>
<button name="test" type="button" onClick="javascript:void(mytest())"  value="测试">测试</button><br/>
<iframe src="http://localhost/tree" width="100%" height="600px" id="myiframe"/>
</body>
</html>

Jupyter Notebook iframe页面嵌入集成跨域处理、自定义工具栏、动态添加、读取单元格cell内容_python

2、自定义Jupyter Notebook按钮

windows平台在C:\ProgramData\jupyter\nbextensions 新建 mytool\mytool.js 文件，内容如下：

define(["require", "jquery", "base/js/namespace"], function (require, $, IPython) {
  "use strict";

  var myCallBack = function () {
      alert('测试内容1111');

//var selectedCell = Jupyter.notebook.get_selected_cell();
      //alert(selectedCell.get_text());

//调用iframe外部页面的js方法
      //top.mytest();
  };

  var test_button = function () {
    if (!IPython.toolbar) {
      $([IPython.events]).on("app_initialized.NotebookApp", test_button);
      return;
    }
    if ($("#test_button").length === 0) {
      IPython.toolbar.add_buttons_group([
        {
          'label'   : '测试按钮',
          'icon'    : 'fa-list',
          'callback': myCallBack,
          'id'      : 'test_button'
        },
      ]);
    }
  };

  var load_ipython_extension = function () {
    test_button();
  };

  return {
    load_ipython_extension : load_ipython_extension,
    myCallBack : myCallBack,

  };

});

在dos窗口中执行激活扩展项：jupyter nbextension enable mytool/mytool

Jupyter Notebook iframe页面嵌入集成跨域处理、自定义工具栏、动态添加、读取单元格cell内容_windows平台_02

3、设置Jupyter Notebook在当前页面中打开新页面

windows平台配置C:\Users\Administrator\.jupyter\custom\custom.js ，内容如下：

define(["require", "jquery", "base/js/namespace"], function (require, $, IPython) {
        IPython._target = '_self';
});

4、其他

启动：jupyter notebook --ip=192.168.1.230

安装扩展项：jupyter nbextension install C:/Users/Administrator/.jupyter/custom.js

//安装成功后，系统自动拷贝文件到 C:/ProgramData/jupyter/nbextensions 目录下

卸载扩展项：jupyter nbextension uninstall C:/ProgramData/jupyter/nbextensions/custom.js

4.2023-05-23：如果交换字符串 X 中的两个不同位置的字母，使得它和字符串 Y 相等，那么称 X 和 Y 两个字符串相似。如果这两个字符串本身是相等的，那它们也是相似的。例如，“tars“ 5.鲸图知识图谱平台，助力金融业务深度洞察（上）