blocks|key|813752|text|或者，您可以将脚本放在iframe本身中，从而以这种方式缩短代码。我相信这会使它的性能变得更轻。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|813753|$(document).ready(function(){+++++++
++++$('a').click(function(event)+{
++++++++alert("demo+only");
++++++++event.preventDefault();
++++});+
});|code-block|syntax|javascript|813754|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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.</p>

<pre class="lang-js prettyprint-override"><code>$(document).ready(function(){       
    $('a').click(function(event) {
        alert("demo only");
        event.preventDefault();
    }); 
});
</code></pre>


blocks|key|1028453|text|我希望$(document).ready在iframe的内容加载之前执行。尝试改用iframe的onload属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1028454|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/jsref/event_frame_onload.asp^0|3|H|1C|6|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>I would expect that <code>$(document).ready</code> executes before the content of the iframe has loaded. Try using the <a href="http://www.w3schools.com/jsref/event_frame_onload.asp" rel="noreferrer">onload</a> attribute for the iframe instead.</p>


blocks|key|814006|text|我也在寻找禁用iframe链接，但找不到解决方案。多亏了HTML5，您可以通过简单地添加sandbox属性来轻松禁用链接。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|814007|<iframe+src="externalsite.com"+sandbox></iframe>|code-block|syntax|javascript|814008|view+demo|814009|我希望这对搜索网络的人有所帮助，特别是因为这个问题首先出现在Google上。|814010|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/1939gkf4/^0|7|6|18|7|0|0|0|9|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|M|3|N|5|6|7|16|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>I was looking to disable <code>iframe</code> links too and couldn't find a solution. Thanks to HTML5, you can easily disable links by simply adding the <code>sandbox</code> attribute. </p>

<pre><code>&lt;iframe src="externalsite.com" sandbox&gt;&lt;/iframe&gt;
</code></pre>

<p><a href="http://jsfiddle.net/1939gkf4/">view demo</a></p>

<p>I hope this helps someone searching the net, especially since this questions pops up first on Google.</p>


blocks|key|1028687|text|"lol“提到的解决方案实际上工作得很好。在做了几个小时之后，我偶然发现了这个……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1028688|将iframe放在div元素中，然后使div透明，并将iframe的z索引推到div后面。请参阅此示例：|1028689|<div+class="container">
++<iframe+class="lockframe"+src="www.google.com"></iframe>
</div>|code-block|syntax|javascript|1028690|然后像这样设置你的css：|1028691|div.container+{+background:+transparent;+}
iframe.lockframe+{+z-index:+-2;+}|1028692|加载您的页面，div将接受单击事件，而不是iframe。|1028693|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>The solution mentioned by "lol" actually works quite well.  I stumbled on this accidentally after working on this for a couple of hours...</p>

<p>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:</p>

<pre><code>&lt;div class="container"&gt;
  &lt;iframe class="lockframe" src="www.google.com"&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>

<p>Then set up your css like this:</p>

<pre><code>div.container { background: transparent; }
iframe.lockframe { z-index: -2; }
</code></pre>

<p>Load up your page and the div is what will accept the click events, not the iframe.</p>


blocks|key|813916|text|上面的答案都不会起作用，除非你在本地加载内容，因为当window.load事件触发时，iframe通常还没有加载。您可以向iframe添加侦听器，以查找iframe中的所有a并禁用它们。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|813917|$("iframe").load(function()+{
++++$("iframe").contents().find("a").each(function(index)+{
++++++++$(this).on("click",+function(event)+{
++++++++++++event.preventDefault();
++++++++++++event.stopPropagation();
++++++++});
++++});
});|code-block|syntax|javascript|813918|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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.</p>

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


blocks|key|1028802|text|我认为，如果您没有在源服务器上设置Access-Control-Allow-Origin，那么所有建议的解决方案(除了html5沙箱)都不会起作用。为了解决这个问题，在某些情况下，可以使用代理服务器，检索另一个服务器上的页面内容，解析html代码，去除链接，并将结果返回给客户端的浏览器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1028803|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>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.</p>


blocks|key|1028529|text|这是您的问题的通用解决方案。希望这能很好地工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1028530|$(window).load(function(){
++++$('#templateframe').contents().find('a').click(function(event)+{
++++++++alert("demo+only");
++++++++event.preventDefault();
++++});+
});|code-block|syntax|javascript|1028531|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is the generic solution of your problem. Hope this will work well.</p>

<pre class="lang-js prettyprint-override"><code>$(window).load(function(){
    $('#templateframe').contents().find('a').click(function(event) {
        alert("demo only");
        event.preventDefault();
    }); 
});
</code></pre>


blocks|key|1028555|text|作为防止默认的替代方案，您可以将锚点更改为跨度，以便更明显地显示链接不再是链接。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1028556|$('#templateframe').contents().find('a').each(function()+{
++++$(this).replaceWith($('<span>'+%2B+this.innerHTML+%2B+'</span>'));
});|code-block|syntax|javascript|1028557|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>As an alternative to preventing default you can change anchors to spans so it is more visible that link is not link anymore.</p>

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


<p>I want to disable all links inside an IFRAME, when people click on those link, alert would popup.</p>

<p>Here is what I have so far, but the jQuery does nothing. Not sure what I did wrong.</p>

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

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

            event.preventDefault();

        }); 
});
</code></pre>

<p>Thanks in advance.</p>


Disable all links inside IFRAME using jQuery

服务器

jQuery

HTML5

我想禁用IFRAME内的所有链接，当人们点击这些链接时，警报将弹出。这就是我到目前为止所拥有的，但是jQuery什么也不做。不知道我做错了什么。<iframe id='templateframe' name='templateframe' src="templates/template<?php echo $templateID; ?>/login.html"></iframe>$(documen

问使用jQuery禁用IFRAME中的所有链接
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery禁用IFRAME中的所有链接EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery禁用IFRAME中的所有链接
EN