使用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();

        }); 
});

提前致谢.

Answer 1

我希望$(document).ready在iframe的内容加载之前执行.请尝试使用iframe 的onload属性.

Answer 2

我也想要禁用iframe链接,但找不到解决方案.借助HTML5,您只需添加sandbox属性即可轻松禁用链接.

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

查看演示

我希望这可以帮助搜索网络的人,特别是因为这些问题首先出现在谷歌上.

Answer 3

"lol"提到的解决方案实际上效果很好.经过几个小时的工作后,我意外地偶然发现了这个......

将你的iframe放在div元素中,然后使div透明并将div的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.

Answer 4

或者你可以把脚本放在iframe本身里面,从而缩短代码.它让我觉得它的性能更轻松.

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

Answer 5

一个传奇在

http://www.webdeveloper.com/forum/showthread.php?182260-Can-we-disable-links-inside-iframes

从过去的好时光中恢复了一种技术,当我们没有像这样的电话时-webkit-gradient().

只需在上面放一个透明的div!

Answer 6

除非您在本地加载内容,否则上述答案都不会起作用,因为当window.load事件触发时,iframe通常尚未加载.您可以向iframe添加侦听器以查找iframe中的所有内容并禁用它们.

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