iframe 跳转到其他页面

最新推荐文章于 2024-06-27 16:30:59 发布
最新推荐文章于 2024-06-27 16:30:59 发布
阅读量9.3k 收藏 9
点赞数 1
分类专栏： HTML 文章标签： 其他 html html5
臧小川
本文链接：https://blog.csdn.net/chuan0106/article/details/119948110
版权

也是第一次用这个标签 嵌套其他网站有的跳转了 本以为是自己的问题 百度才得知 是其他网站 有如下代码
if (top.location != self.location) {top.location=self.location;}
会自动判断当前的location是否是顶层的，即是否被嵌套到iframe里面了，如果是，则强制跳转。

解决办法有两个

  1. 双重iframe：

双重iframe的确可以阻止强制跳转。但是，第一层的iframe就覆盖了第二层的。所以要把第一层的做成透明的，然后第二层嵌套该嵌套的网页。

  1. 增加标签属性 security="restricted" sandbox=""

security="restricted"是IE的禁止js的功能，会导致其他js方法跳转不成功

sandbox="" 是H5的功能。可以让IE，Chrome，Firefox这三大浏览器都实现了禁止iframe的自动跳转

<iframe
 security="restricted" sandbox=""
 src="https://blog.csdn.net/chuan0106"/>

而我的做法是 判断 url 地址是否 === 会跳转的url 如果是就使用该两个方法

当前URL地址=== 会跳转的URL地址 ? <iframe security="restricted" sandbox=""
frameBorder="0"  src={URL地址}  /> : <iframe frameBorder="0"  src={URL地址} />

防止自己的网站被别人 iframe 嵌套

在head位置中添加该代码

<head>

<script language="javascript"> 
if (top.location != location) 
{ 
top.location.href = location.href; 
} 
</script> 

</head>

或者

<head>

<script language="javascript"> 
if(self!=top){top.location.href=self.location.href;} 
</script>

</head>

这种如果别人嵌套了你的网站 就会自动跳转到你的网站 而非嵌套
但是 当别人用类似下面代码做iframe嵌套调用时，会躲避你的javascript代码。

伪代码：

<iframe src="你的页面地址" name="tv" marginwidth="0" marginheight="0" scrolling="No" noResize frameborder="0" id="tv" framespacing="0" width="580" height="550" VSPACE=-145 HSPACE=-385></iframe> 
<script language="javascript"> 
var location=""; 
var navigate=""; 
frames[0].location.href=""; 
</script>

更好的解决办法

这里赋值为空页面,也可赋值为你的页面的URL地址.
js 解决

if(top != self){ 
 location.href = "about:blank"; 
}

另外一种屏蔽iframe方法
html 解决

header("X-Frame-Options: deny"); 
header("X-XSS-Protection: 0");
臧小川
关注
专栏目录
JS页面跳转和js对iframe进行页面跳转、刷新
01-30
JS页面跳转和js对iframe进行页面跳转、刷新
HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法
09-28
就想弄一个winform结合html5的一个小东西，突有心血来潮，想在里面嵌套一个微信网页版，下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法，一起看看吧
框架iframe的界面跳转的运用
梦凝哲雪
08-18 5110
在上述代码中，假设iframe的id属性为"myIframe"，并且要跳转到的子界面的URL是"subpage.html"。通过修改iframe的src属性，可以改变嵌入的网页内容，从而实现跳转到子界面。由于浏览器的同源策略限制，如果iframe子界面和外部界面的域名不同，需进行跨域配置才可访问外部界面。这些方法可以在iframe子界面中的JavaScript代码中使用，以实现跳转到外部界面的操作。此时只能在iframe框架的主界面切换 而 无法跳转到iframe之外的界面。来修改外部界面的URL。
iframe子页面会话过期跳到登录页，父页面如何同时跳转
最新发布
qq_37301074的博客
06-27 307
父页面 index.html 布局，左侧为菜单，右侧通过 iframe 渲染主体内容，当session会话过期时，会跳转到 login.html 登录页面，导致父页面仍为已登录的样式，正确情况应该父级页面直接跳转到登录页。在 login.html 登录页面添加以下js代码。
iframe中由一个页面跳转到另一个页面
qq_44400509的博客
07-29 3065
1.HTML（父页面中存放iframe） <div > <iframe scrolling="no" id="main" name="main" frameborder="0" src="task.html" style="min-height:600px;width:100%;height:100%;"></iframe> </div> 2.子页面中显示第一个子页面x1.html document.getElementById('main').src =
iframe标签中的页面子页面的链接跳转新页面
DeadlyBlack的博客
07-28 5434
iframe；router；页面跳转；父页面；子页面
在 iframe页面 跳转至新的标签页面
User_Lily的博客
10-08 2620
在 iframe页面 跳转至新的标签页面
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
10-27
在嵌套的iframe结构中，页面跳转会变得稍微复杂一些，因为需要定位到正确的目标页面。JavaScript提供了不同的对象和属性来实现不同层级页面之间的跳转。下面将详细解释页面跳转的几种情况：本页面跳转、上一层页面...
Android WebView拦截iframe标签内部跳转教程
08-19
Android WebView 拦截 iframe 标签内部跳转教程 Android WebView 是 Android 系统中一个非常重要的组件，用于显示 web 内容。但是，在显示 web 内容的同时，也可能会出现一些问题，例如 iframe 标签内部的跳转问题...
＜iframe＞框架 ，实现页面的相互跳转
atarik@163.com
07-13 957
a target="a" href="网址">下边显示的二页</a><iframe name="a"src="网址"></iframe>在超链接上设置target目标窗口属性为希望显示的框架窗口名。frameborder="0":去边框。scrolling="no":去滚动条。iframe属性（实现页面的相互跳转）在被打开的框架上加name属性。
iframe中的各种跳转方法（转）
ddzmq5378的博客
02-27 328
一、背景A,B,C,D都是jsp，D是C的iframe，C是B的iframe，B是A的iframe，在D中跳转页面的写法区别如下。 二、JS跳转window.location.href、location.href 本页面跳转，D页面跳转 parent.location.href 上一层页面跳转，C页面跳转 top.location.href 最外层页面跳转，A页面跳转 ...
js页面跳转和js对iframe进行页面跳转、刷新
javablieve
02-14 886
一、js方式的页面跳转 1.window.location.href方式 window.location.href="http://www.dayanmei.com/"; 2.window.navigate方式跳转 Firefox不支持 window.navigate("top.jsp"); 如果：...
iframe嵌套页面中的跳转
weixin_30783629的博客
08-18 1610
简单说一下场景。 假设有A、B、C和D四个JSP页面，D通过iframe嵌套在C中，C通过iframe嵌套在B中，B通过iframe嵌套在A中。 然后现在在D中编写JavaScript代码跳转页面。 在本页面跳转（D页面所在的iframe中跳转） window.location.href = '要跳转的页面路径'; 在上一层跳转（D页面所在iframe的父页面中跳转，即...
iframe页面跳转问题？
fififfil的专栏
02-08 4894
今天碰到一个iframe页面跳转问题，试了n多方法，搞了半天终于给解决了，Default.aspx页                                                                                                点击leftFrame中超链接时右边显示一个Situs.aspx页面，Situs.aspx页面中有个编辑按钮
关于iframe标签的跳转和其他
bpluoxong的博客
12-12 3475
iframe
知识汇总03~iframe页面之间的跳转
ddh3110的博客
07-20 332
页面跳转的方法： 假如有A,B,C三个页面，C是B的iframe, B是A的iframe第一种：本页面的跳转location = window.location =location.href = window.location.href =self.location.href = "url地址";window.open("url地址","_self");1212第二种：父页面的跳转par...
iframe跳转·
yizhidawoniu的博客
05-04 257
 因为要在index中调用servlet，所以在index中添加了iframe，测试发现，iframe跳转成为index子页面，而不是整体跳转 &lt;iframe class="mainframe" style="height: 500px;" name="mainframe" id="mainframe" width="100%" src="movielist" scrolli
vue 点击按钮跳转到iframe页面
05-27
你可以在Vue中使用`<iframe>`标签来嵌入另一个页面。要在Vue中实现按钮点击跳转到iframe页面，可以在点击事件中修改iframe的src属性。例如，你可以在Vue组件中添加以下代码： ```html <template> <div> <button @click="loadIframe">Load Iframe</button> <iframe ref="myIframe" width="100%" height="500px"></iframe> </div> </template> <script> export default { methods: { loadIframe() { const iframe = this.$refs.myIframe; iframe.src = "https://www.example.com"; }, }, }; </script> ``` 在上面的代码中，我们定义了一个按钮，当点击按钮时，会调用`loadIframe`方法。该方法获取`<iframe>`元素的引用，然后将其`src`属性设置为要加载的页面的URL。你可以将URL替换为你自己的目标URL。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

臧小川

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值