Chrome does not update data attribute of object tag

Chrome does not update data attribute of object tag

javascript update object in html
html object data reload
html refresh page
javascript refresh element
window location reload with url parameters
ajax location reload

I would like to dynamically change the 'data' property of an 'object' tag but this does not work in Chrome 48: in the console I can see the attribute value is updated correctly but the first animation is always displayed. Am I missing something?

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
            window.addEventListener("load", function (event)
            {
                setTimeout(function ()
                {
                    console.log("change")
                    document.getElementById("flash").data = "http://edmullen.net/flash/BBC2.swf"
                }, 2000)
            })
        </script>
    </head>
    <body>
        <object id="flash" type="application/x-shockwave-flash" data="http://edmullen.net/flash/BBC2.swf"></object>
    </body>
</html>

I was able to reproduce it on my mac os X mavericks with Chrome 48 and Shockwave Flash plugin r20. r0 .

A working example can be found here : http://plnkr.co/edit/0K2SHlcp0dVvDnBKMuL0?p=preview

You may want to fill a bug report to chrome, Canary 50 is also concerned. It seems to be related with some cache issue webkit had with <object> element.

I didn't find a real fix, even setting the data to "" before changing the data property doesn't works.

The only workaround I can think of is to replace your element :

var obj = document.getElementById('flash');
obj.data = "newUrl.swf";
obj.parentNode.replaceChild(obj.cloneNode(true), obj);

Chrome does not update data attribute of object tag, I was able to reproduce it on my mac os X mavericks with Chrome 48 and Shockwave Flash plugin r20. r0 . A working example can be found  It does the right thing for me in Edge (Windows 10: 10586.218), Chrome Canary, and Firefox Nightly. (Where "the right thing" is: It loads the page and then changes the data attribute of the PDF object.


Try this:

var element = document.getElementById("flash");
element.setAttribute("data", "anim2.swf"); 

This is obviously an alternative, but your code should be working as is? Anyway try this and let me know how it goes...If it doesn't work then check your console for errors.

Chrome does not update data attribute of object tag, I would like to dynamically change the 'data' property of an 'object' tag but this does not work in Chrome 48: in the console I can see the attribute value is  I'm not 100% sure on how to do that, but, I did inspect the element and didn't see any data attributes for the options. So, I'm assuming the extra info I'm adding during the ajax call is being stored elsewhere and that's what I need to modify on load.


I remember this was problematic in older IE already … changing object properties dynamically via script did not get the shown flash to change.

If you can, you could just replace the complete object element with a new one. (If you can meaning if there’s nothing else that prevents you from doing so, like any event handlers bound to the element itself, those will get lost. But that can be worked around by using event delegation, instead of binding the event handler to the element directly.)

Can f.e. simply be done by assigning the outerHTML of the element to itself again, after the data attribute was changed, see modified version of kaiido’s plnkr, http://plnkr.co/edit/wIFUdI8c29awFujkIkGf?p=preview

123536, Chrome Version : 18.0.1025.162 m URLs (if applicable) : Other browsers tested: Safari 5: Firefox 4.x: OK IE 7/8/9: OK What steps will reproduce  Edit 1: This worked for me (EDGE and IE too) if I add the object tag html with the url in the data attribute to the dom instead of setting the attribute value, using javascript, of object tag which is already on the dom. Please note that I've a endpoint flushing response, this updates the value of data attribute.


modify data attribute dynamically of object tag not working · Issue , GitHub is home to over 50 million developers working together to host and review modify data attribute dynamically of object tag not working #903 the PDF file on Chrome and FF, but on Edge the object element stays blank. and look at the DOM again, you can see that the property has been updated. Specifies a name for the object: type: media_type: Specifies the media type of data specified in the data attribute: typemustmatch: true/false: Specifies whether the type attribute and the actual content of the resource must match to be displayed: usemap: #mapname: Specifies the name of a client-side image map to be used with the object: width


<object>, It can be used together with, or in place of, the data attribute. codebase HTML 4 onlyObsolete If not specified, the default is the base URI of the current document. codetype HTML 4 onlyObsolete Embed a flash movie with parameters --> <object data="movie.swf" Update compatibility data on GitHub  The .data() call is special - not only does it retrieve HTML5 data attributes it also attempts to evaluate/parse the attributes. So with an attribute like data-myjson='{"hello":"world"}' when retrieved via .data() will return an Object while retrieval via .attr() will return a string. See jsfiddle example.


HTMLOrForeignElement.dataset, Note that the dataset property itself can be read, but not directly written. dash-​style to camelCase : A custom data attribute name is transformed to a key like an object property of the dataset, as in element.dataset.keyname; Attributes can also Living Standard, No change from latest snapshot, HTML 5.1. The data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts. The source for this interactive example is stored in a GitHub repository.