Changing data content on an Object Tag in HTML

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.

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

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 + '"');

The above solutions did not work properly in Firefox, the Object tag doesn't refresh for some reason. My object tags show SVG images.

My working solution for this was to replace the complete Object node with a clone:

var object = document.getElementById(objectID);
object.setAttribute('data', newData);

var clone = object.cloneNode(true);
var parent = object.parentNode;

parent.removeChild(object );
parent.appendChild(clone );

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'.

I found a very simple solution that also works in Chrome. The trick is to make the object (or a parent element) invisible, change the data attribute, and then make the object visible again.

In the code below, it is assumed that object_element is the object element and parent_element is the parent, and url is the url of the data.

parent_element.style.display = 'none'; // workaround for Chrome
object_element.setAttribute('data', url);
parent_element.style.display = '';

Changing data content on an Object Tag in HTML

Related

Recent Posts