Execute script tags in published HTML (#30)

holoviz · Mar 21, 2019 · 36da312 · 36da312
1 parent 3fb8538
commit 36da312
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 5 deletions.
diff --git a/pyviz_comms/notebook.js b/pyviz_comms/notebook.js
@@ -26,8 +26,32 @@ function handle_add_output(event, handle) {
   var toinsert = output_area.element.find("." + CLASS_NAME.split(' ')[0]);
   if (id !== undefined) {
     var nchildren = toinsert.length;
-    toinsert[nchildren-1].children[0].innerHTML = output.data[HTML_MIME_TYPE];
-    toinsert[nchildren-1].children[1].textContent = output.data[JS_MIME_TYPE];
+    var html_node = toinsert[nchildren-1].children[0];
+    html_node.innerHTML = output.data[HTML_MIME_TYPE];
+    var scripts = [];
+    var nodelist = html_node.querySelectorAll("script");
+    for (var i in nodelist) {
+      if (nodelist.hasOwnProperty(i)) {
+        scripts.push(nodelist[i])
+      }
+    }
+
+    scripts.forEach( function (oldScript) {
+      var newScript = document.createElement("script");
+      var attrs = [];
+      var nodemap = oldScript.attributes;
+      for (var j in nodemap) {
+        if (nodemap.hasOwnProperty(j)) {
+          attrs.push(nodemap[j])
+        }
+      }
+      attrs.forEach(function(attr) { newScript.setAttribute(attr.name, attr.value) });
+      newScript.appendChild(document.createTextNode(oldScript.innerHTML));
+      oldScript.parentNode.replaceChild(newScript, oldScript);
+    });
+    if (JS_MIME_TYPE in output.data) {
+      toinsert[nchildren-1].children[1].textContent = output.data[JS_MIME_TYPE];
+    }
     output_area._hv_plot_id = id;
     if ((window.Bokeh !== undefined) && (id in Bokeh.index)) {
       window.PyViz.plot_index[id] = Bokeh.index[id];

diff --git a/src/renderer.ts b/src/renderer.ts
@@ -132,11 +132,32 @@ class HVJSExec extends Widget implements IRenderMime.IRenderer {
 
       const html_data = model.data[this._html_mimetype] as string;
       this._div_element.innerHTML = html_data;
+      const scripts = [];
+      const nodelist = this._div_element.querySelectorAll("script");
+      for (const i in nodelist) {
+        if (nodelist.hasOwnProperty(i))
+          scripts.push(nodelist[i])
+      }
+
+      scripts.forEach( (oldScript) => {
+        const newScript = document.createElement("script");
+        const attrs = [];
+        const nodemap = oldScript.attributes;
+        for (const j in nodemap) {
+          if (nodemap.hasOwnProperty(j))
+            attrs.push(nodemap[j])
+        }
+        attrs.forEach( (attr) => newScript.setAttribute(attr.name, attr.value) );
+        newScript.appendChild(document.createTextNode(oldScript.innerHTML));
+        oldScript.parentNode.replaceChild(newScript, oldScript);
+      });
       this.node.appendChild(this._div_element);
 
-      let data = model.data[this._js_mimetype] as string;
-      this._script_element.textContent = data;
-      this.node.appendChild(this._script_element);
+      if (this._js_mimetype in model.data) {
+        let data = model.data[this._js_mimetype] as string;
+        this._script_element.textContent = data;
+        this.node.appendChild(this._script_element);
+      }
 
       this._displayed = true;