How do you change HTML Object element data attribute value in JavaScript?
Here is what i am trying
<object type="text/html" id="htmlFrame" style="border: none;" standby="loading" width="100%"></object>
var element = document.getElementById("htmlFrame");
element.setAttribute("data", "http://www.google.com");
This question is related to
javascript
html
object
The behavior of host objects <object> is due to ECMA262 implementation dependent and set attribute by setAttribute() method may fail.
I see two solutions:
soft: element.data = "http://www.google.com";
hard: remove object from DOM tree and create new one with changed data attribute.
This works:
<html>
<head></head>
<body>
<object type="text/html" id="htmlFrame" style="border: none;" standby="loading" width="100%"></object>
<script type="text/javascript">
var element = document.getElementById("htmlFrame");
element.setAttribute("data", "attributeValue");
</script>
</body>
</html>
If you put this in a file, open in it a web browser, the javascript will execute and and the "data" attribute + value will be added to the object element.
Note: If you simply look at the HTML source, you wil NOT see the attribute. This is because the browser is showing you the static source sent by the webserver, NOT the dynamically rendered DOM. To inspect the DOM, use a tool like Firebug. This will show you what DOM the browser has rendered, and you will be able to see the added attribute.
Using Firefox + Firebug or Google Chrome, you can right click on a part of a page and do "Inspect Element". This will bring up a view of the rendered DOM.
document.getElementById("PdfContentArea").setAttribute('data', path);
OR
var objectEl = document.getElementById("PdfContentArea")
objectEl.outerHTML = objectEl.outerHTML.replace(/data="(.+?)"/, 'data="' + path + '"');
The following code works if you use jquery
$( "object" ).replaceWith('<object data="http://www.google.com"></object>');
In JavaScript, you can assign values to data attributes through Element.dataset.
For example:
avatar.dataset.id = 12345;
Reference: https://developer.mozilla.org/en/docs/Web/API/HTMLElement/dataset
Source: Stackoverflow.com