Changing <object> tag element's data property dynamically

**codeexploiter** · 08-04-2009, 08:57 AM

Hi All,

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

Code:

<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" type="text/html" data="http://www.google.com" 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:

Code:

window.onload = function(){
					setTimeout(function(){
						var o = document.body.getElementsByTagName("object")[0];
						//o.setAttribute("data", "http://www.yahoo.com");
o.data = "http://www.yahoo.com";
						alert(o.data)	;
					}, 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.

**Ghodmode** · 09-15-2009, 12:01 PM

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 createblog.com. I implemented the same solution using JQuery methods.

Here's my example code:

Code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<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/vnd.microsoft.icon" 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;
	}
	</style>
	
	<script type="text/javascript">
	$(document).ready(function(){
		$('a').click(function(event){
			event.preventDefault();
			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();
			$(obj).remove();
			$(container).append( newobj );
		});
	});
	</script>
</head>
<body>
<p><a href="#">Click Me</a> <b>: description1.html</b></p>
<div>
<object border="0" data="description1.html"></object>
</div>

</body>
</html>

Edit:
Now I'm using it live on my site: http://www.ghodmode.com/portfolio

--
Ghodmode
http://www.ghodmode.com

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

Thread Tools

Search Thread

Changing <object> tag element's data property dynamically

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

Bookmarks

Bookmarks

Posting Permissions