安装该库可将云笔记本嵌入网页中,并使用 JavaScript 与之交互.
使用 CDN 中的脚本标签...
获取库
在相关 HTML 文件并输入以下内容以跨源请求方式导入库:
<script crossorigin src="https://www.wolframcdn.com/notebook-embedder/0.1/wolfram-notebook-embedder.js"></script>
使用库
创建一个要在 HTML 文件中呈现笔记本的容器:
<div id="notebookContainer"></div>
将笔记本嵌入到给定的 DOM 节点中:
WolframNotebookEmbedder.embed(
'https://www.wolframcloud.com/obj/user/Published/basic-example.nb',
document.getElementById('notebookContainer'),
{allowInteract: true}
)
使用导入语句...
该流程使 npm 和 webpack. 关于 webpack 的更多详细信息,请参阅其文档.
确认已安装 Node.js
从命令行调用 node -v:
$ node -v
v9.11.1
- 如果未安装 Node.js,请访问其网页下载并安装.
设置项目
创建一个包含所有文件的目录,然后切换到该目录:
$ mkdir wolfram-notebook-webpack && cd wolfram-notebook-webpack
使用默认值初始化 npm:
$ npm init -y
在本地安装 webpack:
$ npm install webpack --save-dev
安装 webpack-cli 在命令行运行 webpack:
$ npm install webpack-cli --save-dev
创建一个如下所示的项目结构:
wolfram-notebook-webpack
|- package.json
|- package-lock.json
|- /node_modules
|- /src
|- index.js
|- /dist
|- index.html
获取库
使用 npm 将库安装到本地的父 Wolfram-notebook-webpack 目录中:
npm install --save wolfram-notebook-embedder
使用库
转换到分发子目录:
$ cd dist
打开 index.html 并创建一个要在其中渲染笔记本的容器:
<div id="notebookContainer"></div>
转换到源子目录:
$ cd ../src
打开 index.js,导入库并将笔记本嵌入到给定的 DOM 节点中:
import * as WolframNotebookEmbedder from 'wolfram-notebook-embedder';
WolframNotebookEmbedder.embed(
'https://www.wolframcloud.com/obj/user/Published/basic-example.nb',
document.getElementById('notebookContainer'),
{allowInteract: true}
)
创建构建
转到父目录:
$ cd ..
打开 package.json 文件,并将 “dependencies” 键的值更改为以下内容:
"dependencies": {
"wolfram-notebook-embedder": "^0.1.5"
}
用 npx 创建构建:
$ npx webpack
技术要点
该库公开了一个将笔记本呈现到 DOM 节点的 embed 函数. 它返回一个 Promise ,其通过各种方法解析为一个对象,以进一步与笔记本进行交互并控制笔记本. 有关更多信息,请参见 Wolfram Notebook Embedder 库接口文档.