iframe实现Html嵌入Html

iframe实现Html嵌入Html

<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

top.location = "http://www.baidu.com"  

<div class="buttons">
  <div class="pull-right"><a href="javascript:top.location='{{ continue }}'" class="btn btn-primary">{{ button_continue }}</a></div>
</div>

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

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地址