Menu
I have an HTML page which contains an Object tag to host an embedded HTML page.
<object style="border: none;" standby="loading" id="contentarea" width="100%" height="53%" type="text/html" data="test1.html"></object> However, I need to be to change the HTML page within the object tag. The current code seems to create a clone of the object and replaces the existing object with it, like so:
function changeObjectUrl(newUrl) { var oContentArea = document.getElementById("contentarea"); var oClone = oContentArea.cloneNode(true); oClone.data = newUrl; var oPlaceHolder = document.getElementById("contentholder"); oPlaceHolder.removeChild(oContentArea); oPlaceHolder.appendChild(oClone); } This seems a rather poor way of doing this. Does anyone know the 'correct' way of changing the embedded page?
Thanks!
EDIT: In response to answers below, here is the full source for the page I am now using. Using the setAttribute does not seem to change the content of the Object tag.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Test</title> <script language="JavaScript"> function doPage() { var objTag = document.getElementById("contentarea"); if (objTag != null) { objTag.setAttribute('data', 'Test2.html'); alert('Page should have been changed'); } } </script> </head> <body> <form name="Form1" method="POST"> <p><input type="button" value="Click to change page" onclick="doPage();" /></p> <object style="visibility: visible; border: none;" standby="loading data" id="contentarea" title="loading" width="100%" height="53%" type="text/html" data="test1.html"></object> </form> </body> </html> The Test1.html and Test2.html pages are just simple HTML pages displaying the text 'Test1' and 'Test2' respectively.
307
The <object> tag is an HTML tag and used to display multimedia like audios, videos, images, PDFs, and Flash in web pages. It can also be used for displaying another webpage inside the HTML page. The <param> tag is also used along with this tag to define various parameters.
The <object> tag defines a container for an external resource. The external resource can be a web page, a picture, a media player, or a plug-in application. To embed a picture, it is better to use the <img> tag. To embed HTML, it is better to use the <iframe> tag.
You can do it with setAttribute
document.getElementById("contentarea").setAttribute('data', 'newPage.html'); EDIT: It is also recommended that you use the window.onload to ensure that the DOM has loaded, otherwise you will not be able to access objects within it.
It could be something like this:
function changeData(newURL) { if(!document.getElementById("contentarea")) return false; document.getElementById("contentarea").setAttribute('data', newURL); } window.onload = changeData; You can read more about window.onload here
167
This seems to be a browser bug, setAttribute() should work. I found this workaround, which seems to work in all browsers:
var newUrl = 'http://example.com'; var objectEl = document.getElementById('contentarea'); objectEl.outerHTML = objectEl.outerHTML.replace(/data="(.+?)"/, 'data="' + newUrl + '"'); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
