asked on

Remove style from DOM when placed in iframe

I use the following code to dynamically place content in an iframe.

The problem is that if there are bad syles in the code, the bad styles stay even after the content is placed in iframe.

The problem only seems to be in Firefox.

If you test my code in Firefox you will see the problem.

Thanks for the help!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
 
<h1>Dynamically Place Content of div in Iframe</h1>
 
<div id="postentry">
 
<style type="text/css">
html, body { background: red;}
</style>
<body><h1>>Bad Code2<h1>tstt<h3>Only the iframe should be red<h3>
 
</div>
 
<h2>Footer</h2>
 
<script type="text/javascript">
 
	var messageContent = document.getElementById('postentry');
	if (messageContent) 
	 {
		var htmlContent = messageContent.innerHTML;
		messageContent.innerHTML = '';
		var iFrame = document.createElement("iframe");
		iFrame.setAttribute("id","ifhsf2gxvzw54vx");
		iFrame.marginWidth = "0";
		iFrame.frameBorder = "1";
		iFrame.height = "500px";
		iFrame.width = "100%";
		iFrame.style.zIndex = "999";
		
		var htmlPost = document.getElementById('postentry');
		if (htmlPost) 
		{
			htmlPost.appendChild(iFrame);
			var displayFrame = this.document.getElementById("ifhsf2gxvzw54vx");
			var doc = displayFrame.contentDocument;
			if (doc == undefined || doc == null)
			{
			    doc = displayFrame.contentWindow.document;
			}    
			doc.open();
			doc.write(htmlContent);
			doc.close();
			doc.body.leftMargin = "0px";
			doc.body.rightMargin = "0px";
			doc.body.topMargin = "0px";
			doc.body.bottomMargin = "0px";
		}
	}		
		
</script>
 
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michel Plungjan

erm. or not. Let me try again

Michel Plungjan

Nope, I cannot see the issue

In IE the scrollbars are red here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
 
<h1>Dynamically Place Content of div in Iframe</h1>
 
<div id="postentry">
 
<style type="text/css">
html, body { background: red;}
</style>
<body><h1>>Bad Code2<h1>tstt<h3>Only the iframe should be red<h3>
 
</div>
 
<h2>Footer</h2>
 
<script type="text/javascript">
 
        var messageContent = document.getElementById('postentry');
        if (messageContent) 
         {
                var htmlContent = messageContent.innerHTML;
                messageContent.innerHTML = '';
                var iFrame = document.createElement("iframe");
                iFrame.setAttribute("id","ifhsf2gxvzw54vx");
                iFrame.marginWidth = "0";
                iFrame.frameBorder = "10px";
                iFrame.height = "500px";
                iFrame.width = "100%";
                iFrame.style.zIndex = "999";
                
                var htmlPost = document.getElementById('postentry');
                if (htmlPost) 
                {
                        htmlPost.appendChild(iFrame);
                        var displayFrame = this.document.getElementById("ifhsf2gxvzw54vx");
                        var doc = displayFrame.contentDocument;
                        if (doc == undefined || doc == null)
                        {
                            doc = displayFrame.contentWindow.document;
                        }    
                        doc.open();
                        doc.write('<div style="border:10px solid black; height:100%; width:100%; background-color:yellow">'+htmlContent+'</div>');
                        doc.close();
                        doc.body.leftMargin = "0px";
                        doc.body.rightMargin = "0px";
                        doc.body.topMargin = "0px";
                        doc.body.bottomMargin = "0px";
                }
        }               
                
</script>
 
</body>
</html>

Open in new window

SOLUTION

exalkonium

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hankknight

ASKER

I only want the iframe to have a red background.

Because I am removing the bad code that has the style in it and placing that code inside an iframe, I do not want the bad style to apply to the body. This does not work for me with Firefox.
IE7.png
FF.png

hankknight

ASKER

Upon more testing I found that this works in Firefox 3 but not Firefox 2.

Any ideas how to fix this for Firefox 2?

Michel Plungjan

Nope. FF2 is so last year ;)