Question

I try to embed a html in an object which failed to display on IE. Here is the js code

 document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>';

and here is the html

<div id="one"><object id="foo" name="foo" type="text/html" data="$jsurl/animate/right/ap2.html"></object></div>

The code displays correctly on other browsers, but not IE, and IFRAME is not an option, cause I need it to be transparent to overlay on top of div.

Need to know how to display it on IE, or any other options?

Answer 1

You can get the contents of the remote HTML file by using XmlHttpRequest object, then insert the HTML code as innerHTML of your div.

The code could be like this:

var request = null;

if (window.XMLHttpRequest) {
     // If IE7, Mozilla, Safari, and so on: Use native object.
      request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
     // ...otherwise, use the ActiveX control for IE5.x and IE6.
     request = new ActiveXObject('MSXML2.XMLHTTP.3.0');
}

request.open('GET', '$jsurl/animate/right/ap2.html', false); 
request.send();

if (request.status == 200) {
    document.getElementById('one').innerHTML = request.responseText;
}