iframe实现Html嵌入Html

iframe实现Html嵌入Html

1
2
3
4
5
<div class="container">
<div style="text-align: center;">
<iframe src="{{ payment_url }}" frameBorder="0" width="100%" height="{{ iframe_height }}px" scrolling="no"></iframe>
</div>
</div>

坑:如何从iframe中跳出来,让整个页面都跳转

问题引出

使用iframe可能会遇到让整个页面跳转到某个url,如果我们直接通过

  • <a>标签url直接跳转
  • JS中的window.location.href
  • JS中的window.navigate()
  • JS中的self.location.href

都会只让iframe部分跳转,如果我想要整个页面全部跳转呢?

解决办法

JS中的top.location

1
top.location = "http://www.baidu.com"
1
2
3
<div class="buttons">
<div class="pull-right"><a href="javascript:top.location='{{ continue }}'" class="btn btn-primary">{{ button_continue }}</a></div>
</div>

注:页面链接 *.location.href 用法

1
2
3
4
5
top.location.href="url"             //在顶层页面打开url(可以用在iframe框架里面跳出框架)
self.location.href="url" //仅在本页面打开url地址
parent.location.href="url" //在父窗口打开Url地址
this.location.href="url" //用法和self的用法一致
if (top.location == self.location) //判断当前location 是否为顶层来禁止iframe引用

如果页面当中有自定义iframe的话,也可以将 parent self top 替换为自定义iframe的名称,效果就是在自定义iframe窗口打开url地址

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :