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;
# 重點，轉發websocket需要的設置；Notebook內核連接方式 ws://192.168.1.230:9999/api/kernels/***/channels?session_id=***
proxy_set_header X-Real_IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X_Forward_For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
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; }
#配置轉發websocket（ws）請求
location /ws{
root html;
index index.html index.htm;
proxy_pass http://localhost;
}
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>
2、打開jupyter_notebook_config.py文件
找到 c.NotebookApp.allow_origin = '' 將 '' 改為 '*'
3、自定義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
4、設置Jupyter Notebook在當前頁面中打開新頁面
windows平台配置C:\Users\Administrator\.jupyter\custom\custom.js ， 內容如下：
define(["require", "jquery", "base/js/namespace"], function (require, $, IPython) { IPython._target = '_self'; });
5、其他
啟動：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
6、jupyterhub nginx代理配置
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; map $http_upgrade $connection_upgrade { default upgrade; '' close; } server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { proxy_pass http://192.168.110.13:9000; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # websocket headers proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection $connection_upgrade; proxy_set_header X-Scheme $scheme; proxy_buffering off; } location ~ /.well-known { allow all; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
7、jupyterhub 用戶自動登錄
編輯 /home/ssy/Python-3.7.3/share/jupyterhub/templates/login.html 增加如下代碼：
