How to embed IE in an HTML page

Posted on 2006-06-04
Last Modified: 2008-01-09

I know this may sound odd, but I would like to embed an IE object within an HTML page, similar to how you might embed an Excel file in an HTML page.  I would then like to write the appropriate HTML to that IE object. The idea is to have a page within a page, without using IFRAMEs or FRAMEs, so that all of the HTML is in the same file.

I am currently trying this:

  function write_IE() {
      return myie.write("Hello");

  width   =  800
  height  =  400
  id      = 'myie'
  classid = 'CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'>

<form >
  <input type=submit onclick='return write_IE()' value='Hello'>

The classid is CLSID_WebBrowser. I have also tried classid = 'CLSID:0002DF01-0000-0000-C000-000000000046' which is  CLSID_InternetExplorer.  Neither seems to work, but the latter makes the status line say that it is still loading... forever.

I have also tried myie.outterHTML and myie.innerHTML.  The only interesting thing is that the innerHTML causes an error that onerror catches.  That's progress... but I still don't know why the embedded object isn't showing.

Note that in this example, I am using the form to do the writing. Ultimately, I will load directly, preferably with a PARAM tag, if possible.

Answers, anyone?


Question by:jandrieu
    LVL 30

    Expert Comment

    > The idea is to have a page within a page, without using IFRAMEs or FRAMEs, so that all of the HTML is in the same file.
    There is no need to embed anything.
    If you want independent scrollbars, then use a block container with explicit width/height and use "overflow:auto" or  "overflow:scroll".

    <div style="height:200px; width:100px; overflow:auto">
    your content goes here
    LVL 11

    Expert Comment

    Hi Joe.
    A tricky thing indeed and I don't really see the point of embedding IE as an object. I can see a lot of reasons why this would not work. First of all, your method describes something that happens on the client side, not the server side. Since you have no control whatsoever over the clients computer, you might run into trouble. Imo it is better to include one page in another on the server side. What if the user doesn't run windows, for example? ...or are having another version of IE installed? I guess I don't fully understand why you want to use this method.

    >> The idea is to have a page within a page, without using IFRAMEs or FRAMEs, so that all of the HTML is in the same file.

    If this is your reasons, let me provide you with a couple of work-arounds:

    1. Use server side includes (SSI). In ASP or PHP you can include one file in another. Since everything happens on the server, the output HTML will be like one page. This is a good method if you want to include a full document. More about SSI:

    2. Use objXMLHTTP. This method is good if you only want the output HTML from another file. The file could be another webpage and it does not have to be on the same server as the container file. More info here:

    The two above methods happens on the server. That means your visitor are all getting the same output regardless what software or computer they use. Using your suggested method would be the opposite - if we ever can get it to work. Anyway, I would be happy to help you out with this. But you have to explain a little more what you want to accomplish.


    Author Comment

    Thanks, John. However, I am looking to do this on the client side.  The goal is to have a separate namespace, javascript environment, and style cascades for the embedded HTML. In other words, the embedded HTML needs to be able to specify its own <HEAD>, <STYLE>, and <SCRIPT> elements. The DIV that was suggested, SSIs, and the output from MSXML using objXMLHTTP all place the HTML in the same container.  Which means if I have lots of embedded HTML from different authors & sources, I'll potentially be combining a bunch of unknown namespaces, stylesheets, and javascript.

    A separate embedded IE for each source would isolate them into groups where their own javascript/styles/etc. can be anything they want without messing up other embedded content on the same page.

    Unfortunately, there does seem to be a security violation with the method of embedding IE.  I was able to embed IE using a "Location" parameter to load a particular URL, but I couldn't then write to the embedded object.

    I have figured out a way to do it with IFRAMEs since posting the question, but I'm still hoping someone can find a way to load up an embedded IE with static HTML content from the "parent" web page, as I'm not yet convinced the IFRAMEs will maintain its own namespace, although it looks like it does so far.  I could do it if I were willing to create separate files for the embedded content (just using the "Location" parameter), but I don't think that's the right option. However, it might be worth it to get the embedded IE.


    LVL 30

    Expert Comment

    An iframe IS an embedded browser instance.

    If you want all your code inside one single html file, then you can place your "embedded" pages inside some html element or comment, then use DOM+javascript to read the code and write that to the iframe.
    You'll need to encode all the html entities in the "embedded" pages and then decode them using javascript before you write it to the iframe.

    Author Comment

    By encoding, I'm assuming you mean that I'll have to handle the quotes and related content correctly.

    For example, here is what is almost working:
                function decode(msg)
                      return msg;
                <iframe name='myie' src='about:blank'
    onload='myie.document.write(decode("<div contentEditable=true>praise</div><a href=>bob</a>"))'></iframe>
                <iframe name='myie2' src='about:blank'
    onload='myie2.document.write(decode("<HTML><body>embedded <strong>also</strong></body></html>"))'></iframe>

    However, as you point out, the "embedded" content won't handle quotes very well, and possibly other problems.

    What do I have to do to properly encode/decode the embedded HTML so that it can be sent as a string var to the write method?

    LVL 30

    Accepted Solution

    That's not a very orthodox method in the first place.
    Using separate files for the content of your iframes is much better.

    I guess you should at least encode all "<", all ">" and all quotes, so your code will be treated as plain text.
    Javascript has methods for encoding/decoding into url format: escape() and unescape().
    The php equivalent is urlencode() and urldecode().

    If you choose to use this method, you should know that the result won't be "accessible" since it relies on javascript.
    Search engines won't be able to read your iframes' content.
    So, don't use that method for a public site.

    Author Comment

    Ok.  I'll look into encoding the embedded stuff. Unescape works fine with simple results, letting me put quotes around attributes in the embedded HTML.

    Good point about the search engines.  Since the initial app is all client-side, this won't be critical. However, I'll have to remember if/when putting it on a server.  The main thing with the separate files is that I don't want users to have obvious access to the embedded content.

    Thanks for the answer.
    LVL 30

    Expert Comment

    cheers  :)

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Join & Write a Comment

    Introduction This warning has to be one of the most commonly issued warnings in the history of PHP.  The article explains why this warning arises and what to do to mitigate the problem. How this Happens HTTP headers include many different kinds…
    Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now