I have an HTML string with me like this:
var str = "<html><head><link href='abc.css'/><script src='js/a.js'></script><title>hello</title></head><body><div><img src='images/abcd.png'></div></body></html>";
Now, I need to show this HTML in an iframe, so what I do is set the iframe src as follows:
document.getElementById('frameID').setAttribute('src', "data:text/html, " + str);
Now, the problem is that the html above requires some resources using relative paths, which is not possible to be accessed directly.
Though I do have all the resources required by the HTML string/file stored in Indexed DB as key value pairs, having key as the path and the value as the data of the file.
I tried doing this by setting an onload event on my iframe and then in the handler I try to access the contentWindow of the iframe but this has some security issues (since the origins are not the same). By getting the contentWindow I could have manipulated the img and the script tags.
Is there some way to be able to access these resources after setting the iframe src as I have shown above?
Please Help, I have been stuck for a long time.
I would like to comment on the same question, but I cannot comment. I can only tell even you add "./", "~/" or "../" to the paths, such as creating "~/js/a.js", it will not work for a data-uri, because it seems like it cannot reference the base html that you want it to go to.
Research continuing...