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

Automating powerpoint using python. How to access format axis objects

python format powerpoint axis

Currently I'm working on Python to automate a powerpoint file. I'm using win32com.client to access the various objects needed. However I haven't been able to find any documentation on chart objects...

Convert a 2D array to JSON in PHP

php arrays json algorithm pdo

My goal is to make a single database hit to generate a JSON array of objects with attributes that could be also be an array of objects, which could also have attributes that array of objects etc of...