使用 jQuery 禁用 IFRAME 中的所有链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4777642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable all links inside IFRAME using jQuery
提问by Shadow_boi
I want to disable all links inside an IFRAME, when people click on those link, alert would popup.
我想禁用 IFRAME 内的所有链接，当人们点击这些链接时，会弹出警报。
Here is what I have so far, but the jQuery does nothing. Not sure what I did wrong.
到目前为止，这是我所拥有的，但 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();
});
});
Thanks in advance.
提前致谢。
采纳答案by lilsizzo
Or else you could put the script inside the iframe itself and thus shortening the code to this way. It makes it a lighter performance I believe.
或者，您可以将脚本放在 iframe 本身中，从而将代码缩短为这种方式。我相信它使它具有更轻的性能。
$(document).ready(function(){
$('a').click(function(event) {
alert("demo only");
event.preventDefault();
});
});
回答by Mads Mogensh?j
回答by Josan Iracheta
I was looking to disable iframelinks too and couldn't find a solution. Thanks to HTML5, you can easily disable links by simply adding the sandboxattribute.
我也想禁用iframe链接，但找不到解决方案。多亏了 HTML5，您只需添加sandbox属性即可轻松禁用链接。
<iframe src="externalsite.com" sandbox></iframe>
I hope this helps someone searching the net, especially since this questions pops up first on Google.
我希望这可以帮助搜索网络的人，特别是因为这个问题首先出现在谷歌上。
回答by Zoccadoum
The solution mentioned by "lol" actually works quite well. I stumbled on this accidentally after working on this for a couple of hours...
“lol”提到的解决方案实际上效果很好。在研究了几个小时后，我偶然发现了这个......
Put your iframe inside a div element, then make the div transparent and push the z-index of the iframe behind the div. See this example:
将 iframe 放在 div 元素中，然后使 div 透明并将 iframe 的 z-index 推到 div 后面。看这个例子：
<div class="container">
<iframe class="lockframe" src="www.google.com"></iframe>
</div>
Then set up your css like this:
然后像这样设置你的css：
div.container { background: transparent; }
iframe.lockframe { z-index: -2; }
Load up your page and the div is what will accept the click events, not the iframe.
加载您的页面，div 将接受点击事件，而不是 iframe。
回答by lol
A legend over at
一个传奇在
http://www.webdeveloper.com/forum/showthread.php?182260-Can-we-disable-links-inside-iframes
http://www.webdeveloper.com/forum/showthread.php?182260-Can-we-disable-links-inside-iframes
revived a technique from the good old days, back when we didn't have calls like -webkit-gradient().
从过去的美好时光中恢复了一种技术，当我们没有像-webkit-gradient().
Just put a transparent div over it!
只需在它上面放一个透明的 div！
回答by Steven Bennett
None of the above answers will work unless maybe you are loading the content locally because by the time the window.load event fires the iframe hasn't typically loaded yet. You can add a listener to the iframe to find all a's inside the iframe and disable them.
除非您在本地加载内容，否则上述答案均无效，因为当 window.load 事件触发时，iframe 通常尚未加载。您可以向 iframe 添加侦听器以查找 iframe 中的所有 a 并禁用它们。
$("iframe").load(function() {
$("iframe").contents().find("a").each(function(index) {
$(this).on("click", function(event) {
event.preventDefault();
event.stopPropagation();
});
});
});
回答by 1man
I think none of the proposed solutions (other than the html5 sandbox) will work if you have not set Access-Control-Allow-Origin on the source server. To solve this problem, in some cases one can use a proxy server, retrieve the content of the page on another server, parse the html code, get rid of the links, and return the result to the client's browser.
我认为，如果您没有在源服务器上设置 Access-Control-Allow-Origin，那么所有建议的解决方案（html5 沙箱除外）都不会起作用。为了解决这个问题，在某些情况下可以使用代理服务器，在另一台服务器上检索页面内容，解析html代码，去掉链接，并将结果返回给客户端的浏览器。
回答by Abdullah Kiser
This is the generic solution of your problem. Hope this will work well.
这是您问题的通用解决方案。希望这会运作良好。
$(window).load(function(){
$('#templateframe').contents().find('a').click(function(event) {
alert("demo only");
event.preventDefault();
});
});
回答by Bula
As an alternative to preventing default you can change anchors to spans so it is more visible that link is not link anymore.
作为防止默认的替代方法，您可以将锚点更改为跨度，以便链接不再是链接更加明显。
$('#templateframe').contents().find('a').each(function() {
$(this).replaceWith($('<span>' + this.innerHTML + '</span>'));
});
