jquery - Iframe content text click event not working

Question

I am using menu type and that respective content load in iframe with same domain url. When click the div(using class name) inside the iframe content i need to reload the url.

I tried the following code.

Html Code:

<ul>
<li href="http://mywebsite/contact">contact</li>
<li href="http://mywebsite/faq">faq</li>
<li href="http://mywebsite/abcd">abcd</li>
</ul>

<iframe  class="embed-responsive-item" src="http://mywebsite/contact" id="right_content_iframe" scrolling="no" frameborder="0" style="width:100%;border:0px;min-height:500px;" ></iframe>

Js Code:

$(document).ready(function() {
        $('ul.li').click(function(e) {
            e.preventDefault();
            if ($(this).attr('href')) {
                console.log($(this).attr('href'));
                $('#right_content_iframe').attr('src', $(this).attr('href'));
                e.preventDefault();
            }
        });

        var iframe = $('#right_content_iframe').contents();
        console.log(iframe);
        iframe.find(".page_refresh").click(function() {
            location.reload();
        });

    });

The default contact page will load in iframe. When i click the faq link the iframe url load http://mywebsite/faq. On that time when i click the div (.page_refres) in faq page I need to reload the url.

Faq Page:

<div>Same text</div>
<div class="page_refresh" > Page Refresh</div>

But you don't need javascript for the menu if you're using an iframe... http://stackoverflow.com/questions/740816/open-link-in-iframe — demux, Sep 17 '15 at 08:58

Seabizkit · Answer 1 · 2015-09-17T09:24:39.607

Hi have my own project which i use iframe quite a bit... revsisted the code as i know what you want is in there somewhere... to get my project working again i first had to do.... check browser console for:

http://stackoverflow.com/questions/18586921/how-to-launch-html-using-chrome-at-allow-file-access-from-files-mode?answertab=active#tab-top

I had to run...

"C:\Program Files (x86)\Google\Chrome\Application\Chrome.exe" --allow-file-access-from-files

I also had to restart all my chrome instances.

I will now proceed to find the line that you need.

cant remember what i was all doing... and my was way more complicated. but it seems like I just replaced the whole iframe with the new url.

window.parent.$('#sumdiv').html('<iframe  id="myIframe" style="border: 0px; " src="' + url + '" width="100%" height="100%" allowTransparency="true"></iframe>');

This should help

score -1 · Answer 2 · answered Sep 17 '15 at 08:51

First of all, this is incorrect:

 <li href=".....

If you don't want to write an <a> tag you can use datasets:

 <li data-href="......

Is more correct. In the second point, your selector is wrong:

 $('ul.li').click(function(e) {

This means the ul with class li. You need to select li childs in a ul with this:

 $('ul li').click(function(e) {
 // --^

Note that dot disappears.

Complete code:

 <ul>
   <li data-href="http://mywebsite/contact">contact</li>
   <li data-href="http://mywebsite/faq">faq</li>
   <li data-href="http://mywebsite/abcd">abcd</li>
 </ul>

  $(document).ready(function() {
    $('ul li').click(function(e) {
        e.preventDefault();
        var href = $(this).attr('data-href');
        if (href) {
            $('#right_content_iframe').attr('src', href);
            e.preventDefault();
        }
    });

    var iframe = $('#right_content_iframe').contents();
    iframe.find(".page_refresh").click(function() {
        location.reload();
    });

});

jquery - Iframe content text click event not working

2 Answers2

I will now proceed to find the line that you need.