使用iframe标签时，如何阻止嵌入的页面跳转(Vue、HTML 均可使用)

最新推荐文章于 2024-03-15 13:56:43 发布
最新推荐文章于 2024-03-15 13:56:43 发布
阅读量2.9k 收藏 3
点赞数 1
分类专栏： Vue 文章标签： vue js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16733389/article/details/115869684
版权 
        <iframe :src="pannelInfo.pannelURL" id="web" frameborder="0" class="web-frame" 
        security="restricted"
        sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts"></iframe>

security是js 的属性，后面的sandbox是h5的属性

值描述
" "应用以下所有的限制。
allow-same-origin允许 iframe 内容被视为与包含文档有相同的来源。
allow-top-navigation允许 iframe 内容从包含文档导航（加载）内容。
allow-forms允许表单提交。
allow-scripts允许脚本执行。
allow-popups允许弹窗。
7柒丶
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
禁止iframe内的页面跳转
kerryqpw的博客
11-08 5322
禁止iframe内的页面跳转         iframe里如何禁止页面跳转。 &lt;iframe name="son" src="https://www.hao123.com" width="100%" height="100%" scrolling="auto" security="restricted" sandbox="allow-top-navigat
vue 页面tabs切换,替换iframe
10-25
vue页面tab切换，替换原来的iframe实现，利用vue的router-view和keep-alive实现
禁止iframe页面的所有js脚本如alert及弹出窗口等
10-25
一个页面里面需要放一个iframe框架来预览网站，可是被预览的这个网站中含有很多js脚本，于是想禁止iframe里面的脚本，下面是方法
vue 使用 iFrame 嵌套带有登录的网站 登录成功 无法跳转
最新发布
id_EquinoxFlower的博客
03-15 314
2.如个你使用Frame标签嵌套的网址是带有登录的需要注意两个网站是不是在统一域名下面如果在就可以正常登录 ， 如果不在的话会出现登录成功但是无法跳转的问题。1.项目在使用iFrame标签嵌套其他，网址或者自己的网址的时候如果没有登录只是浏览是没有问题的。这个问题有点好玩，当时做的时候没想起来，哎不说讲一下问题。
vue 项目里面嵌套iframe，隐藏iframe里面的dom元素iframe里面页面跳转，vue页面监听不到load的问题
weixin_43842488的博客
10-14 3588
vue嵌套iframe，隐藏iframe里面的dom元素，iframe里面页面跳转返回操作之后，隐藏代码失效的原因
vue下iframe标签页,切换标签页,iframe不重载
12-05
vue项目中一个模板组件，不同iframe的src地址，对应不同的路由，不同标签页，且切换标签页不重载。这种客户的要求是特例在网上没有，所以纯自行手码。由于项目在vuex保存了标签页，所以初次进入该组件时，调用了一次$store。思路很关键，看懂了可复用，熟悉vue的朋友酌情下载。
如何阻止iframe里引用的网页自动跳转
热门推荐
WKY_CSDN的博客
05-08 1万+
今天做了个网页，要在网页里设置一个iframe，然后套用其他的网站的时候，出现了莫名其妙的问题，我的网页居然会强制自动跳转到这个网页上。 经过网上的资料搜索，发现问题的原因是由于嵌入的页面中有以下代码： if (top.location != self.location) {top.location=self.location;} 使用里这段代码之后，会自动判断当前的locatio
如何阻止 iframe 里引用的网页自动跳转
我的博客
06-13 1281
增加两个：security=“restricted” sandbox=“”（内嵌百度时要允许弹框，即 sandbox=“allow-popups”），前者是 IE 的禁止 js 的功能，后者是 HTML5 的功能。百度代码中有 if (top.location!} 使用里这段代码之后，会自动判断当前的 location 是否是顶层的，即是否被嵌套到 iframe 里面了，如果是，则强制跳转。
被嵌套到iframe里面强制跳转方法，防止强制跳转方法
chenhao0568的专栏
08-10 5107
&lt;script&gt; if(top.location!=self.location){top.location=self.location} &lt;/script&gt; 自动判断当前的location是否是顶层的，即是否被嵌套到iframe里面了，如果是，则强制跳转。   防止强制跳转方法:即增加两个：security="restricted" sandbox=""，...
iframe里阻止页面新窗口打开/不允许跳出的方法
仿站、源码搭建/迁移技术博客
03-16 3162
iframe嵌入的网站，如果有_blank新窗口打开的链接，会跳出iframe框架，如何防止跳出呢？Ps：经测试还有些不完美，新窗口打开的链接是不会跳出了，但也不会跳转了（通俗讲就是链接死了）。朋友们如果有更好的解决方案，可评论区留言交流。HTML5新特性中的sandbox属性。
Vue页面内嵌ifream，返回异常问题
xiu52t的博客
02-23 3091
问题描述 业务需求，点击文件列表项，进入内嵌 iframe 的详情页预览pdf，火狐浏览器点击页面按钮或者浏览器返回按钮两次才能退回到列表页。页面按钮返回功能通过$router.go(-1)实现。 问题原因 浏览器机制的原因，在 iframe 导航变化后手动点击浏览器的后退按钮也依然只是后退 iframe 中的导航。 <iframe ref="iframe" :src="pdfUrl"&gt...
在vue中实现嵌套页面(iframe)
10-15
主要介绍了在vue中实现嵌套页面(iframe)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Iframe页面请求跳转问题解决
05-31
首先在父页面的javascript给定义一个window.name，并赋予一个字符串值，如window.name="test"，其中赋予的字符串值可以随意定义，然后在Iframe页面的Form 标签中定义target属性，并且其值也必须与之前定义的window....
div嵌套html不用iframe
09-28
在不用iframe的情况下嵌套页面，所以只好在div中嵌套，下面是具体的实现，主要使用到了jquery，大家可以参考下
Vue编译中出现 Parsing error: x-invalid-end-tag vue/no-parsing-error 问题
qq_16733389的博客
01-11 1万+
出现这种问题目前笔者发现的有以下几种可能 一、 如果是使用IDEA和WebStorm的小伙伴 在项目根目录下找到.eslintrc.js 文件在rules下面添加 "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }] 重新启动项目即可 二、 如果是使用VSCode 的小伙伴 需要关闭 VSCode 的代码检查 Vetur 使用了一个特定版本的 eslint-plugin-vue，用于检查代码的 <template> 部分。 L
Vue3 + TS ： Unexpected token,Did you mean `{‘}}` or `&rbrace`
qq_16733389的博客
11-05 7782
笔者今天开发的时候遇到了这样一个错误： Unexpected token,Did you mean `{'}}` or `&rbrace 上述的是错误提示，如下图： 问题出现的原因：问题出现的原因是因为在上图的73行，我这边做了一个类型的预测，后面获取的dom元素是 <HTMLElement>类型的。而问题就出现在这个泛型的简括号，TS语法检测时候可能将这个判断成为了 标签元素，因为在tsx或者jsx中是可以直接写元素标签，不需要引号包裹的，所以语法校验可能是判断到了这一点，于是我就将这
Vue3.x 深度选择器（样式穿刺）＞＞＞ 和 /deep/ 和 ::v-deep 被弃用desprecated
qq_16733389的博客
10-27 3812
近期笔者使用Vue3 + TS写项目的时候，使用深度选择器发现如下提示 [@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead. 一、深度选择器淘汰 >>> /deep 和如下的写法在vue3.x中被淘汰了 <style lang="less" scoped> /deep/ .ant-table-tbody > tr &gt
element ui 安装失败的问题解决
qq_16733389的博客
09-24 3643
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: vue@3.2.16 npm ERR! node_modules/vue npm ERR! vue@"^3.0.0" from the root project npm ERR! npm ERR! Could not res.
VUE3+TS 引入JQuery
qq_16733389的博客
11-02 3591
先执行如下安装命令，安装jquery npm install jquery npm install @types/jquery 然后在main.ts中引入 import $ from 'jquery' createApp(App).use($) 在shims-vue.d.ts 配置 /* eslint-disable */ declare module '*.vue' { import type { DefineComponent } from 'vue' const component: D
vue使用iframe嵌入页面并传参
07-27
在Vue中使用iframe嵌入页面并传参，可以按照以下步骤进行操作： 1. 在Vue组件中，可以使用`<iframe>`标签来创建一个iframe元素，例如： ```html <template> <div> <iframe :src="iframeUrl" ref="myIframe"></iframe> </div> </template> ``` 2. 在Vue组件的`data`选项中，定义一个变量来存储要传递给iframe的参数，例如： ```javascript data() { return { iframeUrl: 'https://www.example.com?param=value', }; }, ``` 3. 如果你想动态传递参数，你可以在数据改变时更新`iframeUrl`的值，例如： ```javascript methods: { updateIframeUrl() { // 根据需要更新参数或URL this.iframeUrl = 'https://www.example.com?param=newValue'; }, }, ``` 4. 如果你想在Vue组件中访问iframe中的内容或与iframe进行通信，可以通过`ref`属性引用iframe元素，并使用JavaScript来操作它，例如： ```javascript mounted() { const iframe = this.$refs.myIframe; // 访问iframe中的内容 const iframeDocument = iframe.contentDocument || iframe.contentWindow.document; // 在iframe中执行JavaScript iframe.contentWindow.postMessage('message', '*'); }, ``` 以上是在Vue中使用iframe嵌入页面并传参的基本步骤，你可以根据具体需求进行进一步的定制和处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值