Changing Data Content on an Object Tag in HTML

Changing data content on an Object Tag in HTML

Here's how I finally achieved it. You can do

document.getElementById("contentarea").object.location.href = url;

or maybe

document.getElementById("contentarea").object.parentWindow.navigate(url);

The Object element also has a 'readyState' property which can be used to check whether the contained page is 'loading' or 'complete'.

HTML Object tag 'data' attribute wont update with jQuery change

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.net/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

Is it possible to change elements in Object tag in HTML? If yes, how?

use Jquery load

$("#mydiv").load("YOUR_URL");

your content from provided will be load into this div automatically

updated

If you want to get some specific content like a div with id mychilddiv you can do it like

$("#mydiv").find('#mychilddiv');

Change data of object html tag with onclick event

You can do something like:

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
        function cambiaData(){
            $('#pdf').attr("data", [[ @{'NEW_URL_WITH_NEW_DATA}]]+$("#data").val());
        }

        $(function(){
            $(".date").datepicker({
                todayBtn: "linked",
                language: "it",
                todayHighlight: true
            });

        });
    /*]]>*/
    </script>

and

<div class="row">
        <h5 style="color:red;">Seleziona data</h5>
        <div class="input-group input-group-prepend col-2">
            <span class="input-group-text far fa-calendar-alt"></span>
            <input type="text" class="form-control date" data-provide="datepicker" id="data" th:value="${#dates.format(#dates.createNow(), 'dd/MM/yyyy')}"></input>
        </div>
        <button type="button" class="btn btn-primary" th:text="#{conferma}" onclick="cambiaData();"></button>
</div>
<div class="row">
    <object class="col" th:data="@{URL}" type="application/pdf" height="800" width="800" id="pdf"></object>
</div>

How to change HTML Object element data attribute value in javascript

and in jquery:

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

i.e

$('a').attr('href','http://www.stackoverflow.com/')

Change data value of object tag on button press

On clicking the Anchors link the object data gets changed ,hoping this is what you want

  <html>
        <head>
        <script type="text/javascript" src="jquery.js"></script>    
        <script type="text/javascript">
        $(document).ready(function(){

        $("a").click(function() {

        var thisObjectText=$(this).attr("href");
        if(thisObjectText!=null && thisObjectText!="")
        {
        $('#swf').attr("data",thisObjectText);
        alert($('#swf').attr("data"));
        }

        });

        });

        </script>
        </head>
        <body>

        <div id="test">
        <a href="#first" name="test-1">Aaaa</a>
        <a href="#second" name="test-2">Baaa</a>
        <a href="#third" name="test-3">Caaa</a>
        <a href="#fourth" name="test-4">Daaa</a>
        </div>

        <object id="swf" width="400" height="400" data=""></object> 
        </body>
    </html>

Why the object tag has the data attribute instead of src?

There's no specific reason, it was designed like that by the w3c.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object

One of the big differences from the other tags is that, with the object tag, you can also declare your mime type of the data in the "type" attribute.

Changing Data Content on an Object Tag in HTML