javascript - HTML Object tag 'data' attribute wont update with jQuery change - Stack Overflow

admin管理员组

文章数量:1332865

As you can see from this JSFiddle: /

I am using jQuery to change the 'data' attribute of an object tag. However, even though I am able to change the data attribute in the source code, the actual data stream of the object doesn't change and the same video is played. Does anyone know a fix?

I have tried a few 'refresh' techniques and none have worked so far.

HTML:

<object data="currentURL"></object>

jQuery:

$(document).ready(function(){
    $('body').on('click', "button#switch", function() {
    $( "object" ).attr("data", newURL);
});        
})

As you can see from this JSFiddle: http://jsfiddle/cYxy7/1/

I am using jQuery to change the 'data' attribute of an object tag. However, even though I am able to change the data attribute in the source code, the actual data stream of the object doesn't change and the same video is played. Does anyone know a fix?

I have tried a few 'refresh' techniques and none have worked so far.

HTML:

<object data="currentURL"></object>

jQuery:

$(document).ready(function(){
    $('body').on('click', "button#switch", function() {
    $( "object" ).attr("data", newURL);
});        
})

• javascript
• jquery
• html
• css

Share Follow asked Mar 7, 2014 at 11:18 user2877296user2877296 1

• possible duplicate of Changing data content on an Object Tag in HTML – Dr.Molle Commented Mar 7, 2014 at 11:55

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

The following code works for me

$( "object" ).replaceWith('<object data="' + newURL + '"></object>');

EDIT:

I found out something even stranger. Changing the params does not work until you change the box model of the object:

$(document).ready(function(){
    $('body').on('click', "button#switch", function() {

    $( 'object param[name="flashvars"]' ).attr("value", "hostname=www.twitch.tv&channel=liquidwifi&auto_play=true&start_volume=25");

     $( "object").attr('data',  "http://www.twitch.tv/widgets/live_embed_player.swf?channel=liquidwifi").hide().show(); 

});        
})

this perfectly works: http://jsfiddle/W7NTd/1/

---

For some strange reason changing the param values didnt work, only creating new html seems to work for me:

$(document).ready(function(){
    $('body').on('click', "button#switch", function() {
        $('object param[name="flashvars"]').attr('value', $('object param[name="flashvars"]').attr('value').replace('ivan', 'liquidwifi'));
        var new_html = $('#wrapper').html();
        $('#wrapper').html(new_html);
    });        
})

I added a wrapper for that.

See the fiddle

The flash object is quite trickie to reload.

Try using this simple flashloader or SWFObject.

You need to update a parameter and then the data attribute:

$( "object param[name=flashvars]" ).attr("value", "hostname=www.twitch.tv&channel=liquidwifi&auto_play=true&start_volume=25");
$( "object").css('display', 'none');
$( "object").attr('data',  "http://www.twitch.tv/widgets/live_embed_player.swf?channel=liquidwifi").css('display', ''); 

See http://jsfiddle/W7NTd/2/

Append this in your code. this might help.

 $("object param[name=flashvars]").attr("value", $("object").attr("data"));

the reason is that you are not changing the param value

While changing the object attr change the param flashvars value also

demo here : http://jsfiddle/cYxy7/3/

$(document).ready(function () {
    $('body').on('click', "button#switch", function () {
        alert("The object's 'data' attritube is currently: " + $("object").attr("data"));
        $("object").attr("data", "http://www.twitch.tv/widgets/live_embed_player.swf?channel=liquidwifi");
        $("param[name='flashvars']").attr("value", "hostname=www.twitch.tv&channel=liquidwifi&auto_play=true&start_volume=25");
        alert("The object's 'data' attribute is now: " + $("object").attr("data"));
    });
})

cheers!

本文标签： javascriptHTML Object tag 39data39 attribute wont update with jQuery changeStack Overflow