jandrieu
asked on
How to embed IE in an HTML page
Hello.
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:
<script>
function write_IE() {
return myie.write("Hello");
}
</script>
<object
width = 800
height = 400
id = 'myie'
classid = 'CLSID:8856F961-340A-11D0-
</object>
<form >
<input type=submit onclick='return write_IE()' value='Hello'>
</form>
The classid is CLSID_WebBrowser. I have also tried classid = 'CLSID:0002DF01-0000-0000-
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?
-joe
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:
<script>
function write_IE() {
return myie.write("Hello");
}
</script>
<object
width = 800
height = 400
id = 'myie'
classid = 'CLSID:8856F961-340A-11D0-
</object>
<form >
<input type=submit onclick='return write_IE()' value='Hello'>
</form>
The classid is CLSID_WebBrowser. I have also tried classid = 'CLSID:0002DF01-0000-0000-
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?
-joe
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: http://www.w3schools.com/asp/asp_incfiles.asp
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: http://www.4guysfromrolla.com/webtech/110100-1.shtml
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.
Regards,
John
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: http://www.w3schools.com/asp/asp_incfiles.asp
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: http://www.4guysfromrolla.com/webtech/110100-1.shtml
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.
Regards,
John
ASKER
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.
Cheers,
-joe
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.
Cheers,
-joe
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.
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.
ASKER
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:
<html>
<body>
<script>
function decode(msg)
{
return msg;
}
</script>
<iframe name='myie' src='about:blank'
onload='myie.document.writ
<iframe name='myie2' src='about:blank'
onload='myie2.document.wri
</body>
</html>
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?
-j
For example, here is what is almost working:
<html>
<body>
<script>
function decode(msg)
{
return msg;
}
</script>
<iframe name='myie' src='about:blank'
onload='myie.document.writ
<iframe name='myie2' src='about:blank'
onload='myie2.document.wri
</body>
</html>
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?
-j
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
cheers :)
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
</div>