Home/ Questions/Q 179211
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T14:22:01+00:00

I have an HTML page which contains an Object tag to host an embedded

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Here’s how I finally achieved it. You can do

    document.getElementById('contentarea').object.location.href = url;

    or maybe

    document.getElementById('contentarea').object.parentWindow.navigate(url);

    The Object element also has a ‘readyState’ property which can be used to check whether the contained page is ‘loading’ or ‘complete’.

    • 0