How to block all request inside a </a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2012-02-15T14:47:53.863" class="fromnow">Feb 15 '12 at 14:47</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2012-02-15T15:18:48.430" datetime="2012-02-15T15:18:48.430">Feb 15 '12 at 15:18</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 1,290 times"> <span class="fc-light mr2">Viewed</span> 1,290 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="9295491" data-ownerid="907863" data-score="3"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="9295491"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="3">3</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>We need to block all requests inside a page loaded in an IFRAME tag. The page are located in the same domain, but we need to prevent the navigation in the inside page. Obviously, we don't know the elements in the inner page. They may be links (anchor link) Javascript calls, JQuery calls, Ajax calls, From submit and so on.</p> <p>Here is the way we can handle simple tags and standard submit of a form:</p> <pre class="s-code-block"><code>$('a').click(function (event) { event.preventDefault(); return false; }); $(this).submit(function (event) { event.preventDefault(); return false; }); </code></pre> <p>For example the first function work good but it is only an tag, but if the is triggered using JQuery that function does not work.</p> <p>The second work fine only for standard form submit, but not Ajax submits.</p> <p>Is there a way to handle all the events?</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Feb 15 '12 at 14:47">asked Feb 15 '12 at 14:47</time> <a href="../../users/907863/user907863" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/907863.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="User907863" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/907863/user907863" class="s-user-card--link">User907863</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">407</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="6 silver badge">6</li> <li class="s-award-bling s-award-blingbronze" title="16 bronze badge">16</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-9295491" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="9295491" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-11723258" class="comment js-comment " data-comment-id="11723258" data-comment-owner-id="22470" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment11723258_9295491"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Is this frame loaded via JS/AJAX?</span> – <a href="../../users/22470/powtac" title="37,821 reputation" class="comment-user ">powtac</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/9295491/how-to-block-all-request-inside-a-iframe#comment11723258_9295491"><span title="2012-02-15T15:04:08.407 License: CC BY-SA 3.0" class="relativetime-clean">Feb 15 '12 at 15:04</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">2 Answers<span style="display:none;" itemprop="answerCount">2</span></h2> </div> </div> </div> <a name="9295721"></a> <div id="answer-9295721" class="answer " data-answerid="9295721" data-ownerid="330601" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="9295721"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You could simply overlay a transprent <code><div></code> over the same area as the iframe. The iframe would load as normal but you should not be able to interact with it.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Feb 15 '12 at 15:02">answered Feb 15 '12 at 15:02</time> <a href="../../users/330601/t9b" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/330601.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="T9b" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/330601/t9b" class="s-user-card--link">T9b</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,576</li> <li class="s-award-bling s-award-blinggold" title="4 gold badges">4</li> <li class="s-award-bling s-award-blingsilver" title="26 silver badges">26</li> <li class="s-award-bling s-award-bling__bronze" title="45 bronze badges">45</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-9295721" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="9295721" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-11723719" class="comment js-comment " data-comment-id="11723719" data-comment-owner-id="6848" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment11723719_9295721"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">TAB, TAB, TAB, Enter. Now I've interacted with it.</span> – <a href="../../users/6848/deestan" title="15,019 reputation" class="comment-user ">Deestan</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/9295491/how-to-block-all-request-inside-a-iframe#comment11723719_9295721"><span title="2012-02-15T15:23:38.833 License: CC BY-SA 3.0" class="relativetime-clean">Feb 15 '12 at 15:23</span></a></span> </div> </div> </li> <li id="comment-11771015" class="comment js-comment " data-comment-id="11771015" data-comment-owner-id="330601" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment11771015_9295721"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Deestan and you'd have to keep tabbing to get to the link you wanted to click. I'm not saying it's impossible to circumvent just pretty hard work and the average user using a pointing device is unlikely to know it or want to put in the effort.</span> – <a href="../../users/330601/t9b" title="2,576 reputation" class="comment-user ">T9b</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/9295491/how-to-block-all-request-inside-a-iframe#comment11771015_9295721"><span title="2012-02-17T12:59:01.493 License: CC BY-SA 3.0" class="relativetime-clean">Feb 17 '12 at 12:59</span></a></span> </div> </div> </li> <li id="comment-11840545" class="comment js-comment " data-comment-id="11840545" data-comment-owner-id="6848" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment11840545_9295721"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Of course it's less accessible, but that's not what you said. :) The phrasing "[...] you should not be able to interact with it" is incorrect.</span> – <a href="../../users/6848/deestan" title="15,019 reputation" class="comment-user ">Deestan</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/9295491/how-to-block-all-request-inside-a-iframe#comment11840545_9295721"><span title="2012-02-21T09:42:39.967 License: CC BY-SA 3.0" class="relativetime-clean">Feb 21 '12 at 09:42</span></a></span> </div> </div> </li> <li id="comment-11927649" class="comment js-comment " data-comment-id="11927649" data-comment-owner-id="330601" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment11927649_9295721"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">If you want to be pedantic, I'm not certain a enter key press would trigger an on-click event in all possible situations but in particular in the example the questioner gave. My reply still stands valid for most users, and may be all that is required to meet the demand behind to the question. It's a pretty simple, and fairly robust solution to the problem anyway.</span> – <a href="../../users/330601/t9b" title="2,576 reputation" class="comment-user ">T9b</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/9295491/how-to-block-all-request-inside-a-iframe#comment11927649_9295721"><span title="2012-02-24T15:12:21.413 License: CC BY-SA 3.0" class="relativetime-clean">Feb 24 '12 at 15:12</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="9295785"></a> <div id="answer-9295785" class="answer accepted-answer" data-answerid="9295785" data-ownerid="22470" data-score="1" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="9295785"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Not sure but:</p> <pre class="s-code-block"><code>$(document).click(function(event){ event.preventDefault(); }); </code></pre> <p>Or</p> <pre class="s-code-block"><code>$('').unbind('click'); $('[href]').attr('href', '') </code></pre> <p>See this interesting answer: <a href="../../questions/209029/best-way-to-remove-an-event-handler-in-jquery">Best way to remove an event handler in jQuery?</a></p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 23 '17 at 12:22">edited May 23 '17 at 12:22</time> <a href="../../users/-1/community" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/-1.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Community" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/-1/community" class="s-user-card--link">Community</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Feb 15 '12 at 15:05">answered Feb 15 '12 at 15:05</time> <a href="../../users/22470/powtac" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/22470.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="powtac" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/22470/powtac" class="s-user-card--link">powtac</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">37,821</li> <li class="s-award-bling s-award-blinggold" title="25 gold badges">25</li> <li class="s-award-bling s-award-blingsilver" title="107 silver badges">107</li> <li class="s-award-bling s-award-bling__bronze" title="164 bronze badges">164</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script> / replace <time class="fromnow" /> with human delta between `datetime` attr and now */ document.addEventListener('DOMContentLoaded', function(){ var time_elements = document.querySelectorAll("time.fromnow"); for (var i=0; i<time_elements.length; i++) { time_elements[i].innerHTML = moment(time_elements[i].getAttribute("datetime")).fromNow(); } }); </script> </body> </html>