Is there a way to load full HTML code without iFrame?

I am writing a preview function to let user preview the HTML file they uploaded and do some minor editing. The HTML file will contain no Javascript and no external CSS. All CSS are either inside style tag or inline. Images, on the other hand, will always be external as we don't provide space for storing images.

iFrame is not a good solution, because:

  1. The preview is before actually saving the content, so I cannot provide an URL for iFrame to load the page.
  2. It is difficult to touch the element inside iFrame. As the user will be doing minor update in another text box showing the plain HTML, I will need to update the elements inside frequently.

However, if I just insert content into an <div> the repeated <html>, <head> and <body>tag will crash the page.

So, is there a way I can preview the HTML without iFrame?

1 answer

  • answered 2018-03-22 08:48 Hans Yulian

    if you dont want to have the main app to affect the styling of the preview, you need to use iframe. have you see iframe's content window? https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow. this might be the answer you are looking for. So basically here you try to access the DOM of your iframe. give it a try!

    preview = getYourIframeDom();
    code = getYourHtmlCodeHere();
    preview.contentWindow.document.open("text/html","replace");
    preview.contentWindow.document.write(code);
    preview.contentWindow.document.close();