1

I'd like to start this question by saying that I'm very new to HTML and don't have any formal experience. My goal is to add a snippet of HTML code containing an interactive figure into another HTML document. I have figured out how to do this by using the <object> Tag. The only problem I'm facing is that data= field needs a URL to a separate file. I can't have a two HTML files, as I need to give my client a single HTML. Is there a way to create a new string containing the HTML code of the interactive figure -- then pass it to the data= field? Or something similar?

<object align="center" style="width:30%;height:500px" data="/Users/Desktop/plotly_test2.html"></object>

To reiterate: I was able to use <object> Tag to load the interactive figures into my HTML; however, I am looking for a way to supply the data= field with a string of the HTML, rather than a path to an HTML file.

<object align="center" style="width:30%;height:500px" data="/Users/Desktop/plotly_test2.html"></object>

calin20796
  • 13
  • 2

1 Answers1

0

It is possible by encoding the inner HTML using the URL data scheme.

This is most often done with small images.

The URL becomes something like so:

... data="data:<HTML-base64-encoded>" ...

Of course, the prohibits easy editing, although you can write a script to convert your two HTML documents into one, automatically.

As a side note, in most cases people use <iframe ...> to include another HTML page, rather than <object ...>.

Alexis Wilke
  • 19,179
  • 10
  • 84
  • 156
  • Hi Alexis! I tried converting my interative HTML code to base 64 and included it into data="data:"; however, my figure isn't present when loading the HTML. The figure is only present when I actually include the path to the HTML file itself. – calin20796 Mar 23 '22 at 20:37
  • @calin20796 Hmmm... if you mean that the base64 HTML code includes an `` then that image many also need to be base64 within that HTML. I haven't used that before, so I don't know whether it would work... Logically, it should since the browser will first parse the `` and then find the `` and parse that accordingly. – Alexis Wilke Mar 23 '22 at 20:45
  • 1
    Fixed it with

    Thanks for the tip about iframe     – calin20796 Mar 23 '22 at 21:03