jquery - Iframe 内容文本单击事件不起作用答案

【问题标题】：jquery - Iframe content text click event not workingjquery - Iframe 内容文本单击事件不起作用
【发布时间】：2015-12-14 01:42:04
【问题描述】：

我正在使用菜单类型，并且相应的内容加载到具有相同域 url 的 iframe 中。单击 iframe 内容中的 div（使用类名）时，我需要重新加载 url。

我尝试了以下代码。

HTML代码：

<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代码：

$(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();
        });

    });

默认的联系页面将在 iframe 中加载。当我单击常见问题解答链接时，iframe url 加载http://mywebsite/faq。那时，当我单击 faq 页面中的 div (.page_refres) 时，我需要重新加载 url。

常见问题页面：

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

【问题讨论】：

但如果您使用 iframe，则菜单不需要 javascript...stackoverflow.com/questions/740816/open-link-in-iframe

标签： jquery iframe

【解决方案1】：

您好，我有自己的项目，我经常使用 iframe...修改了代码，因为我知道您想要的东西在某处...为了让我的项目再次工作，我首先必须做...。检查浏览器控制台：

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

我不得不跑……

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

我还必须重新启动我的所有 chrome 实例。

我现在将继续查找您需要的线路。

不记得我都在做什么......而且我的事情要复杂得多。但似乎我只是用新的 url 替换了整个 iframe。

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

这应该会有所帮助

【讨论】：

【解决方案2】：

首先，这是不正确的：

 <li href=".....

如果你不想写<a> 标签，你可以使用数据集：

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

更正确。在第二点，你的选择器是错误的：

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

这意味着具有类 li 的 ul。您需要在 ul 中选择 li childs：

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

注意点消失了。

完整代码：

 <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();
    });

});

【讨论】：