Changing data content on an Object Tag in HTML

Answer 1

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

Answer 2

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;

Answer 3

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

Answer 4

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

Refreshes object in Chrome Version 42.0.2311.90 m

Answer 5

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

Answer 6

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