HTML iframe 标签禁止跳转页面

最新推荐文章于 2023-12-28 15:21:04 发布
原创 最新推荐文章于 2023-12-28 15:21:04 发布 · 2.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#iframe标签 #禁止跳转页面

本文深入探讨了HTML中iframe标签的sandbox属性，解释了其如何为嵌入的内容提供额外的安全限制，包括allow-forms、allow-same-origin、allow-scripts和allow-top-navigation等选项的含义。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

iframe标签的属性：sandbox，启用一系列对 <iframe> 中内容的额外限制,有5个值：

<iframe name="son" src="index.html" width="100%" height="100%" scrolling="auto" security="restricted"    sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts">
  </iframe>

 

  • ""                                  // 应用以下所有的限制。
  • allow-forms                  允许表单提交。
  • allow-same-origin       //允许 iframe 内容被视为与包含文档有相同的来源。
  • allow-scripts                //允许脚本执行。
  • allow-top-navigation     //允许 iframe 内容从包含文档导航（加载）内容。

 

禁止iframe内的页面跳转
kerryqpw的博客
11-08 5768
禁止iframe内的页面跳转         iframe里如何禁止页面跳转。 &lt;iframe name="son" src="https://www.hao123.com" width="100%" height="100%" scrolling="auto" security="restricted" sandbox="allow-top-navigat
Android WebView拦截iframe标签内部跳转
yuan7016的博客
07-18 4938
最近项目里有个广告位需要动态配置，后台给了一段 html嵌套iframe标签的代码，需要Android拦截iframe内部的跳转，自己做处理。 比如，下面是一段html代码，嵌套这iframe标签，src就是跳转地址，我现在就要当你点击该网址的时候做拦截，自己做处理而不是跳转。 <html> <iframe src="https://www.imooc.com/" fr...
iframe页面无法跳转问题
weixin_30786657的博客
07-11 3060
之前在工作中没有结果过iframe，来到现在这家公司以后 真是被iframe坑惨了。这个随笔就来纪录一下遇到的奇葩问题。 先介绍下我们的项目结构类似与博客园这种页面，左侧很多tab栏，右边是一块内容区域，之后不管做什么样的操作都在这一块区域中，大概有一百多个页面，我是第一次见到这样结构，用的iframe页面来进行嵌套的。 正常情况下是可以用下面这种方式进行页面跳转的，之前也在别的页面成功过 ...
iframe里阻止页面新窗口打开/不允许跳出的方法
仿站、源码搭建/迁移技术博客
03-16 5006
iframe嵌入的网站，如果有_blank新窗口打开的链接，会跳出iframe框架，如何防止跳出呢？Ps：经测试还有些不完美，新窗口打开的链接是不会跳出了，但也不会跳转了（通俗讲就是链接死了）。朋友们如果有更好的解决方案，可评论区留言交流。HTML5新特性中的sandbox属性。
点击iframe禁止跳转
Cwcgirl的博客
12-28 641
【代码】点击iframe禁止跳转。
在iframe（框架）中跳转的问题
渔闻520的博客
10-31 8192
在iframe中跳转会出现这样的问题，就是比如一个页面包含两个iframe，而其中一个要跳转到一个页面，则这个跳转如果不加处理会导致跳转失败。原因就是这个iframe包含的界面在跳转，这时就会出错。这时需要了解target的几个属性值： _blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。 _self 这个目标的值对所有没有指定目标的 &lt;a&gt; 标签是默认目标，它使得...
HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法
01-19
于是上网搜了一下阻止iframe跳转的办法，就是在iframe标签加上security=restrictedsandbox= 两个属性。前者是IE的禁止js的功能，后者是HTML5的功能。 使用sandbox=allow-scripts allow-same-origin allow-popups可以
android webview iframe,Android WebView拦截iframe标签内部跳转教程
weixin_30988079的博客
05-26 1023
最近项目里有个广告位需要动态配置，后台给了一段 html 嵌套iframe标签的代码，需要Android拦截iframe内部的跳转，自己做处理。比如，下面是一段html代码，嵌套这iframe标签，src就是跳转地址，我现在就要当你点击该网址的时候做拦截，自己做处理而不是跳转。oh,我还是第一次知道iframe标签，不过想着应该和普通拦截h5差不多，兴致勃勃的就开始撸代码了，但是无论怎么配置Web...
div嵌套html不用iframe
09-28
在网页设计和开发中，有时候我们需要在不使用`iframe`元素的情况下将一个页面的内容嵌入到另一个页面中。`iframe`虽然提供了这种功能，但有时可能会带来一些问题，如加载速度慢、SEO优化困难等。在这种情况下，我们...
HTML里 iframe跳转后关闭iframe
weixin_30788239的博客
02-23 365
if(window != top){ top.location.href = location.href; } 转载于:https://www.cnblogs.com/handongyu/p/6433675.html
禁止iframe页面的所有js脚本如alert及弹出窗口等
10-25
一个页面里面需要放一个iframe框架来预览网站，可是被预览的这个网站中含有很多js脚本，于是想禁止iframe里面的脚本，下面是方法
Iframe页面请求跳转问题解决
05-31
首先在父页面的javascript给定义一个window.name，并赋予一个字符串值，如window.name="test"，其中赋予的字符串值可以随意定义，然后在Iframe页面的Form 标签中定义target属性，并且其值也必须与之前定义的window.name的值相同，即<form method="post" target="test" >，在子页面提交后即可刷新父页面跳转到指定的请求页面. 此资源由网友提供。谢谢！
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
09-04
主要介绍了如何禁止iframe里面的脚本弹出的窗口覆盖了父窗口,经测试，貌似只能在IE下进行需要的朋友可以参考下
使用iframe实现点击导航无刷新切换页面
10-11
使用iframe实现点击导航页面无刷切换，使用bootstrap布局
iframe弹出窗
09-23
很不错iframe弹出窗口，通过div+diag实现
如何阻止iframe里引用的网页自动跳转
热门推荐
WKY_优快云的博客
05-08 1万+
今天做了个网页，要在网页里设置一个iframe，然后套用其他的网站的时候，出现了莫名其妙的问题，我的网页居然会强制自动跳转到这个网页上。 经过网上的资料搜索，发现问题的原因是由于嵌入的页面中有以下代码： if (top.location != self.location) {top.location=self.location;} 使用里这段代码之后，会自动判断当前的locatio
解决项目中引用iframe点击后出现不会完全跳转的问题
weixin_54443782的博客
07-29 3081
解决iframe页面跳转问题
iframe页面内点击按钮不跳转问题
u013742774的专栏
03-04 2416
1.在iframe中页面不能跳转（案例：登陆超时问题） ，在全局页面中加入如下代码：       $(document).ready(function(){    $.ajaxSetup({        global: false,        type: "POST",        complete: function (XMLHttpRequest, textStatus) {   ...
在iframe中，地址完全正确，但却跳转不过去
wu_dada的博客
11-20 2834
在制作前端网页时，使用iframe链接header公共部分时，路径虽然完全正确，但却已然跳转不过来。 因为在编辑器内部打开时，服务器是针对一个项目打开的，所以出现这种情况时，可能是因为你的文件夹位置放置不正确，因为，最外面的那个文件夹并不是你所建的那个项目，你可能把你的项目放到了一个文件夹中，而你的头部则是与你的项目处于同一级文件夹状态。
禁止iframe页面跳转的所有页面刷新
最新发布
03-31
### 防止 iframe 中页面跳转导致父页面刷新的方法 为了防止 `iframe` 内部页面跳转引起父页面的刷新，可以通过 JavaScript 动态监听并控制 `iframe` 的行为。以下是具体的解决方案： #### 方法一：拦截 `iframe` 的导航事件 现代浏览器支持 `beforeunload` 和 `pagehide` 事件，这些事件可以在页面即将卸载时触发。通过绑定这些事件到 `iframe` 上，可以检测其内部是否发生了跳转操作。 ```javascript const iframe = document.querySelector('iframe'); // 绑定 load 事件以确保 iframe 加载完成后执行逻辑 iframe.addEventListener('load', () => { const iframeWindow = iframe.contentWindow; // 如果 iframe 页面支持 postMessage，则可以与其通信 iframeWindow.addEventListener('beforeunload', (event) => { event.preventDefault(); // 阻止默认行为 console.log('Iframe 即将跳转'); }); iframeWindow.addEventListener('pagehide', (event) => { event.preventDefault(); console.log('Iframe 正在隐藏'); }); }); ``` 此方法适用于部分场景，但由于安全策略限制（如跨域），可能无法完全生效[^1]。 --- #### 方法二：重写 `iframe` 的 `window.location` 如果能够访问 `iframe` 的内容（即同源），则可以直接修改其内部的行为，例如覆盖 `location.href` 或其他导航属性。 ```javascript const iframe = document.querySelector('iframe'); iframe.onload = function() { try { const iframeDocument = iframe.contentDocument || iframe.contentWindow.document; const iframeWindow = iframe.contentWindow; // 替换 location.assign 和 location.replace 函数 Object.defineProperty(iframeWindow, 'location', { get: function() { return {}; }, set: function(value) { console.warn('尝试设置新的 URL:', value); throw new Error('禁止更改 iframe 地址'); } }); iframeWindow.history.pushState = function(state, title, url) { console.warn('阻止 pushState 操作:', url); }; iframeWindow.history.replaceState = function(state, title, url) { console.warn('阻止 replaceState 操作:', url); }; } catch (e) { console.error('无法访问 iframe 内容:', e.message); // 可能由于跨域限制引发错误 } }; ``` 上述代码会捕获任何试图改变 `iframe` 当前地址的操作，并抛出异常或记录日志。需要注意的是，这仅在同源的情况下有效[^2]。 --- #### 方法三：使用沙盒模式 (`sandbox`) 属性 HTML 提供了一个名为 `sandbox` 的属性，用于增强 `iframe` 的安全性。启用某些选项后，可以限制 `iframe` 执行脚本、提交表单以及导航至新页面的能力。 ```html <iframe src="example.html" sandbox="allow-scripts"></iframe> ``` 在此配置下，默认禁用了大部分功能（包括导航）。只有显式声明的功能才会被允许。例如，`allow-top-navigation` 将重新启用顶部窗口的导航能力；因此应谨慎选择所需的权限组合[^3]。 --- #### 方法四：动态替换目标链接 假如对 `iframe` 的 HTML 结构有一定掌控权，还可以通过调整超链接的目标属性来避免外部跳转影响父级页面。 ```javascript const iframe = document.querySelector('iframe'); iframe.onload = function() { const links = iframe.contentDocument.querySelectorAll('a[target="_top"], a[target="_parent"]'); links.forEach(link => { link.setAttribute('target', '_self'); // 修改 target 值为 _self link.onclick = function(event) { event.stopPropagation(); // 阻止冒泡 }; }); }; ``` 这种方式适合处理特定类型的锚点标签，但仍然受限于跨域政策的影响[^4]。 --- ### 总结 以上四种方案各有优劣，在实际应用中需综合考虑项目需求和技术约束条件。推荐优先选用 **方法三** （利用 `sandbox` 特性）作为通用的安全防护手段，而对于可控环境下的定制化需求，则可以选择 **方法二** 实现更精细的管控机制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值