Changing data content on an Object Tag in HTML

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

Answer 2

the main reason of this issue is using "/" in local files.

The Wrong Code :

 var obj = document.getElementById("hostedhtml");
 obj.setAttribute('data', "pages\page2.html");

The Right Code :

 var obj = document.getElementById("hostedhtml");
 obj.setAttribute('data', "pages\\page2.html");

Answer 3

Following user2802253, I use this one on Safari and Firefox, which also forces a redraw. (sorry, not enough reputation to post as a simple comment).

theObject.style.visibility = null;
theObject.setAttribute("data", url);
theObject.style.visibility = "visible";

Answer 4

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

Answer 5

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

Answer 6

Changing the data attribute should be easy. However, it may not work perfectly on all browsers.

If the content is always HTML why not use an iframe?