apply css style in an iframe with onclick function works only at first click if the iframe is preloaded

first of all, considering that i'm not a pure programmer but a graphic designer and in addition not English-speaking, so don't be shocked if you see something extremely wrong :) Well, I need to load an iframe and change some of the css contents, just clicking on a link. Also the iframe page will scroll to the anchor position specified in the url. Here the code:

<div id="icontent"></div>
<a onclick="multiClick('index.html#anchor','#FCAA1E','white')"></span>load1<span></a>
<a onclick="multiClick('newindex.html#anchor2','#E2D2A1','red')"></span>load2<span></a>

<script type="text/javascript">
    $('#icontent').append('<iframe></iframe>');
    var jqframe = $("iframe"); 
       jqframe.attr('frameborder','0');
       jqframe.attr('id','myframe');
    function multiClick($link, $color, $name) {
        jqframe.contents().find('.adv-'+ $name).css('background-color', $color);
        jqframe.attr('src', 'folder/' + $link);
     };

    $(document).ready(function(){
        jqframe.attr('src', 'folder/index.html');
     });
</script>

Now, when i load the main page, the iframe is actually preloaded through the document.ready function and clicking on the first link "load1" that link to the same iframe page preloaded "index.html" all works fine, the iframe page scrolls to the anchor and the css is injected. But when I click on the second link "load2" that basically load a different page, the new page "newindex.html" will load but without css injection and scroll to anchor... the injection and scroll occurs only when I click again to the "load2" link. This happen, i suppose, because the iframe needs to preload with the right page before the anchor and css will operate. Do someone have a solution? thanks

Answers


Replace multiClick function with following and try

function multiClick($link, $color, $name) {
    jqframe.attr('src', 'folder/' + $link);
    jqframe.load(function(){
        jqframe.contents().find('.adv-'+ $name).css('background-color', $color);
    });
 };

check if the iframe is ready before clicking the link

$('iframe').ready(function(){
         //do 
    });

thank you @murali, your hint works fine, but i just added a condition cause the $link can be also an anchor like ie "index.html#foo" so it may not need to ".load". Here the code:

var $loaded = null; function multiClick($link, $color, $name) { 
     if ($loaded != $link) { 
        $loaded = $link; jqframe.attr('src', 'folder/' + $link);          
        jqframe.load(function(){ 
           jqframe.contents().find('.adv-'+ $name).css('background-color', $color); }); 
           } else { 
             jqframe.contents().find('.adv-'+ $name).css('background-color', $color); 
            };
         }

Another question :) pointing on an anchor inside the iframe cause that the whole page, not only the iframe, scrolls to the anchor point, hiding essential content that is just on top of the iframe. I've tried adding $(document).load().scrollTop(0); just at the end of the multiClick function but it works only when the iframe url doesn't change: ie from "index.html#foo" to "index.html#bar". When the url is different ie from "index.html#foo" to "index1.html#bar" the whole page scrolls. Any idea?


Need Your Help

Emma code coverage for android JUnit test

android testing junit

How to run Eclemma code coverage tool for android Junit test, not for Junit test? Can any one please help.

What resources mean in ACL in zend framework

zend-framework resources acl

I want to know what is resouces in ACL, is it module, controller in a module or action in controller in module.