CODEWITHSUNDEEP
javascripthtmlobject
Tim C
Tim C

Reputation: 70608

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.

Upvotes: 22

Views: 91669

Answers (14)

German B
German B

Reputation: 11

<div id='myob'>
<object style="border: none;" standby="loading" id="contentarea" 
 width="100%" height="53%" type="text/html" data="test1.html"></object>
</div>

$('#myob').html($('#myob').html());

Upvotes: 1

rahul shukla
rahul shukla

Reputation: 243

This snippet did the job in my case

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

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

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

Upvotes: 1

user9921837
user9921837

Reputation:

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

Upvotes: 0

user7288989
user7288989

Reputation: 11

 var obj = document.getElementById("pdfDoc");
 obj.setAttribute('data', newPdf);

worked on Chrome version 54 and Safari, but didn't work on IE 11

what worked on them all 

 var obj = document.getElementById("pdfDoc");
 obj.setAttribute('data', newPdf);
 var cl = obj.cloneNode(true);
 var parent = obj.parentNode;
 parent.removeChild(obj);
 parent.appendChild(cl);

Upvotes: 1

Israel Gav
Israel Gav

Reputation: 453

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

Upvotes: 10

Anthony Halsted
Anthony Halsted

Reputation: 1

var content_area = document.getElementById("contentarea");
    content_area.data = newUrl;

Refreshes object in Chrome Version 42.0.2311.90 m

Upvotes: 0

Dale Corns
Dale Corns

Reputation: 225

I think this is a better way to achieve your objective.

Html:

<div id="mytemplate"><div>

Js:

function changeTemplate(t){
var mytemplate = document.getElementById("mytemplate");
mytemplate.innerHTML = '<object type="text/html" data=' + t + '></object>';
}
changeTemplate('template.html');
changeTemplate('whatever.html');

Upvotes: 0

wessel
wessel

Reputation: 564

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

Upvotes: 1

user2802253
user2802253

Reputation: 59

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 = '';

Upvotes: 1

MikeT
MikeT

Reputation: 1

Antoher way of doing it, you could embed the object in a DIV

var newUrl = 'http://example.com';
var divEl = document.getElementById('divID');
var objEl = document.getElementById('objID');
objEl.data = newUrl;
// Refresh the content
divEl.innerHTML = divEl.innerHTML;

Upvotes: 0

Abhi Beckert
Abhi Beckert

Reputation: 33359

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

Upvotes: 10

Tim C
Tim C

Reputation: 70608

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

Upvotes: 2

andi
andi

Reputation: 14458

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

Upvotes: 9

Nick
Nick

Reputation:

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?

Upvotes: 0

Related Questions