Change Iframe Style When the Src is Set Dynamically

问题

In my site I have this iframe

<iframe id='iFrameName1' width='1000' height='500'></iframe>

The src tag is dynamically defined with javascript. In addition, I want to dynamically change the style of the iframe (it is in the same domain).

<script> function urlChange() {      
var iframe1 = document.getElementById('iFrameName1'); 
iframe1.src = 'mypage.html';
var cssLink = document.createElement("link"); 
cssLink.href = "iframe.css";  
cssLink.rel = "stylesheet";  
cssLink.type = "text/css"; 
iframe1.contentDocument.getElementsByTagName('head')[0].appendChild(cssLink); 
}  
</script>

The problem is: as the src is defined dynamically, I think the "iframe1.contentDocument" is not found.

How to solve this problem? I want to define the src and to change the iframe style dynamically.

Thanks in advance.

回答1:

EDIT:

You can handle onload event of your iframe like this:

iframe1.onload = function(){ 
 ....
}

Your code could go like this:

function urlChange() {      
    var iframe1 = document.getElementById('iFrameName1'); 
    iframe1.src = 'mypage.html';

    iframe1.onload = function(){
       var cssLink = document.createElement("link") 
       cssLink.href = "iframe.css"; 
       cssLink.rel = "stylesheet"; 
       cssLink.type = "text/css"; 
       var y = (iframe1.contentWindow || iframe1.contentDocument);
       if (y.document)y = y.document;
       y.getElementsByTagName('head')[0].appendChild(cssLink);  
    }
}

DEMO:
http://swift-exploder-php-36-103575.apne1.nitrousbox.com/test/iframe/1.html

The document of contentWindow is here: http://www.w3schools.com/jsref/prop_frame_contentwindow.asp

Hope this helps.

来源：https://stackoverflow.com/questions/23873143/change-iframe-style-when-the-src-is-set-dynamically

标签

javascript

iframe

styles