31

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");
Sid M
  • 4,354
  • 4
  • 30
  • 50
user587159
  • 337
  • 1
  • 4
  • 6

6 Answers6

52

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.

Richard H
  • 38,037
  • 37
  • 111
  • 138
29

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

jacefarm
  • 6,747
  • 6
  • 36
  • 46
Vignesh Manogar
  • 509
  • 5
  • 6
6
document.getElementById("PdfContentArea").setAttribute('data', path);

OR

var objectEl = document.getElementById("PdfContentArea")

objectEl.outerHTML = objectEl.outerHTML.replace(/data="(.+?)"/, 'data="' + path + '"');
Robert Moskal
  • 21,737
  • 8
  • 62
  • 86
Patrick Wong
  • 61
  • 1
  • 2
2

The behavior of host objects <object> is due to ECMA262 implementation dependent and set attribute by setAttribute() method may fail.

I see two solutions:

  1. soft: element.data = "http://www.google.com";

  2. hard: remove object from DOM tree and create new one with changed data attribute.

drs
  • 5,679
  • 4
  • 42
  • 67
user3283655
  • 31
  • 1
2

and in jquery:

$('element').attr('some attribute','some attributes value')

i.e

$('a').attr('href','http://www.stackoverflow.com/')
WEBProject
  • 1,337
  • 5
  • 16
  • 33
  • 48
    This is jquery, not javascript. – Wanjia Jun 12 '18 at 09:07
  • this works but when I want to change value again it doesn't work. for example : $ ('a') .attr ('data', 'http: //www.stackoverflow.com/1.pdf') ok change again $ ('a') .attr ('href', 'http: //www.stackoverflow.com/2.pdf') does not show. any suggestion. regards – Alberto Lujan May 31 '21 at 23:18
-1

The following code works if you use jquery

$( "object" ).replaceWith('<object data="http://www.google.com"></object>');
Gertjan
  • 519
  • 4
  • 5