Results 1 to 2 of 2

Thread: Changing <object> tag element's data property dynamically

  1. #1
    Join Date
    Sep 2005
    Thanked 107 Times in 107 Posts

    Default Changing <object> tag element's data property dynamically

    Hi All,

    I am looking for a way to change and load a HTTP resource in a <object> element.

    <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" type="text/html" data="" style="width: 1000px; height: 600px;"></object>
    I have code like the above in one of my test page. The above code works correctly as a result I can avoid using iframe. Now assume that on a button click I would like to change the URL mentioned in the 'data' attribute of the object element, which is not working. Refer the code mentioned below:

    window.onload = function(){
    						var o = document.body.getElementsByTagName("object")[0];
    						//o.setAttribute("data", ""); = "";
    						alert(	;
    					}, 1000);
    The alert correctly shows the new URL that I had used from the JS. But the content loaded in the object tag element does not change.

    Any help related to this would be appreciated.

  2. #2
    Join Date
    Sep 2009
    Thanked 1 Time in 1 Post


    I was having the same problem, but only in Internet Explorer. Apparently, IE only loads an OBJECT element when the page is loaded. It doesn't load it again when the data attribute is changed. I read somewhere that this is the correct behavior, but I wasn't able to confirm this by looking at the W3C reference.

    I did find a solution which involves using JavaScript DOM methods to clone the object, remove it from the document, then append it back to the object's parent container.

    The solution I found is at I implemented the same solution using JQuery methods.

    Here's my example code:
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
    <html xmlns="">
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<meta http-equiv="content-script-type" content="text/javascript"/>
    	<meta http-equiv="content-style-type" content="text/css"/>
    	<meta http-equiv="X-UA-Compatible" content="IE=8"/>
    	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    	<link rel="shortcut icon" type="image/" href="images/Gm_favicon.ico" />
    	<link rel="icon" href="images/Gm_favicon.ico" />
    	<title>Insert Title Here</title>
    	<style type="text/css">
    	object {
    		position: absolute;
    		top: 50px;
    		left: 50px;
    		width: 800px;
    		height: 400px;
    		border: 1px solid gray;
    	<script type="text/javascript">
    			var obj       = $('object:first');
    			var objdata   = $(obj).attr('data');
    			var container = $(obj).parent();
    			//alert( objdata );
    			if ( objdata.indexOf('description1.html') != -1 ) {
    				$(obj).attr('data', 'description2.html');
    				$('p b').text('description2.html');
    			} else if ( objdata.indexOf('description2.html') != -1 ) {
    				$(obj).attr('data', 'description1.html');
    				$('p b').text('description1.html');
    			var newobj    = $(obj).clone();
    			$(container).append( newobj );
    <p><a href="#">Click Me</a> <b>: description1.html</b></p>
    <object border="0" data="description1.html"></object>
    Now I'm using it live on my site:

    Last edited by Ghodmode; 09-15-2009 at 12:32 PM. Reason: added URL to live example

  3. The Following User Says Thank You to Ghodmode For This Useful Post:

    codeexploiter (10-05-2009)


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts