使用jQuery禁用IFRAME内的所有链接

Question

我想禁用IFRAME内的所有链接，当人们点击这些链接时，应弹出警报。

以下是我的代码，但jQuery没有起作用。不确定我做错了什么。

<iframe id='templateframe' name='templateframe' src="templates/template<?php echo $templateID; ?>/login.html"></iframe>

$(document).ready(function(){       
        $('#templateframe').contents().find('a').click(function(event) {
            alert("demo only");

            event.preventDefault();

        }); 
});

提前感谢。

- Shadow_boi

---

这个应该不会受到浏览器安全限制的限制。 - Anonymous

Answer 1

我认为$(document).ready会在iframe的内容加载前执行。尝试使用iframe的onload 属性。

- Mads Mogenshøj

Answer 2

我想禁用iframe链接，但找不到解决方案。幸运的是，借助HTML5，你可以通过简单地添加sandbox属性轻松禁用链接。

<iframe src="externalsite.com" sandbox></iframe>

查看演示

我希望这能帮助到在网络上搜索的某些人，特别是因为这个问题在谷歌上首先出现。

- JJJ

---

但是如果您需要使用 sandbox="allow-scripts"，链接将再次启用。如果您可以允许JavaScript进行动画等操作，但禁用链接，那将非常好。 - Simon Arnold

根据我的观察，sandbox属性会阻止除了带有电话号码的链接之外的所有链接，例如：<a href="tel://1-123-456-7890">123.456.7890</a>。示例：http://jsbin.com/bacukifudu/1/edit?html,output - Rahul Desai

这不正确。你给的例子有缺陷。*www.paypal-gifts.com/us/giftcardlist/*上的链接实际上不是链接，而是改变位置的javascript函数。`sandbox` 可以防止脚本运行，但并不能禁用HTML锚点。 - None

它也无法处理href="mailto:xyz@_.com"链接。 - Abhijit Jagtap

Answer 3

"lol" 提到的解决方案确实效果不错。我在研究了几个小时后偶然发现了这个方法...

将您的 iframe 放置在一个 div 元素内，然后使该 div 透明，并将 iframe 的 z-index 推到 div 的后面。请参见以下示例：

<div class="container">
  <iframe class="lockframe" src="www.google.com"></iframe>
</div>

然后按照以下方式设置您的CSS：

div.container { background: transparent; }
iframe.lockframe { z-index: -2; }

加载页面后，接收点击事件的是div而不是iframe。

- Zoccadoum

Answer 4

或者你可以将脚本放在iframe内部，从而简化代码为这个方式。我相信这会使它的性能更好。

$(document).ready(function(){       
    $('a').click(function(event) {
        alert("demo only");
        event.preventDefault();
    }); 
});

- lilsizzo

Answer 5

在这里，有位传奇人物重拾了一种古老的技巧，那是我们还没有像-webkit-gradient()这样的调用命令的好日子。

只需要在它上面放一个透明的div！

- lol

---

如果我想滚动iframe的内部内容怎么办？ - Karolis.sh

不好意思，我们更多地是从“设计师想要这个”角度来使用它的，需要一个无法交互的“到另一个网站的窗口”。滚动是不可能的 - 对此感到抱歉！ - lol

啊，我们面临着相同的问题，只不过设计师还想要滚动。 - Karolis.sh

Answer 6

除非您正在本地加载内容，否则上述答案都不起作用，因为在窗口加载事件触发时，iframe 通常还没有加载。您可以向 iframe 添加侦听器，以查找 iframe 内部的所有 a 标签并禁用它们。

$("iframe").load(function() {
    $("iframe").contents().find("a").each(function(index) {
        $(this).on("click", function(event) {
            event.preventDefault();
            event.stopPropagation();
        });
    });
});

- Steven Bennett

---

这适用于从不同域加载的内容吗？浏览器安全方面会有问题吗？ - lol

当然，它在CORS情况下不起作用，但是在同一域/允许来源的情况下，它表现得非常好。 - Gogol

Answer 7

我认为除了html5沙盒之外，如果您没有在源服务器上设置Access-Control-Allow-Origin，则没有提出的解决方案会起作用。 要解决这个问题，在某些情况下可以使用代理服务器，在另一个服务器上检索页面内容，解析HTML代码，摆脱链接，并将结果返回给客户端浏览器。

- 1man

Answer 8

这是您问题的通用解决方案。希望这个方案能够很好地解决您的问题。

$(window).load(function(){
    $('#templateframe').contents().find('a').click(function(event) {
        alert("demo only");
        event.preventDefault();
    }); 
});

- Abdullah Kiser

Answer 9

作为防止默认行为的替代方法，您可以将锚点更改为 spans，这样更容易看出链接不再是链接了。

$('#templateframe').contents().find('a').each(function() {
    $(this).replaceWith($('<span>' + this.innerHTML + '</span>'));
});

- Bula