简体   繁体   中英

Embed a local html file in reveal.js

I want to import bokeh interactive graphs in my reveal.js presentation.

What I can do

  1. I can embed html content inside reveal.js with an iframe:
<iframe data-src="https://demo.bokeh.org/sliders" 
width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" 
scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width:
100%;" allowfullscreen=""></iframe>
  1. I can save a Bokeh plot in html format:
from bokeh.plotting import figure, output_file, show

output_file("/line.html")
p = figure(plot_width=400, plot_height=400)
p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)
show(p)

which result in a file line.html that I can see and interact with when I open it with my web-browser.

What I can't do

Embed my line.html file inside reveal.js.

I tried:

  1. <iframe data-src="/Users/JohnDoe/line.html" width="945" height="555" frameborder="0" marginwidth="0" marginheight="0" scrolling="yes" style="border:3px solid #666; margin-bottom:5px; max-width: 600%;" allowfullscreen=""></iframe>

    This result in the message Cannot GET /Users/JohnDoe/line.html displayed in my iframe.

  2. <iframe data-src="file:///Users/JohnDoe/line.html" width="945" height="555" frameborder="0" marginwidth="0" marginheight="0" scrolling="yes" style="border:3px solid #666; margin-bottom:5px; max-width: 600%;" allowfullscreen=""></iframe>

    And nothing is displayed in the trame.

What I want to do

I want that my .html file to be displayed in my iframe as it is working in 1. of the "What I can do" section.

Reveal.js output is displayed from a local server of some kind, correct? AFAIK IFrames will not allow you to load from local files in that case. In general, you cannot load file:\\\\ from http:\\\\ because that would be a giant security hole. A solution would be to run a basic HTTP server to serve the Bokeh HTML files, eg python -m http.server (or python -m SimpleHTTPServer for legacy Python 2) and have your IFrame load the Bokeh pages from the simple server.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM