Changing data content on an Object Tag in HTML

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

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

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 );

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