• 欢迎来到本博客,希望可以y一起学习与分享

iframe 与 父子页面的交互

前端 benz 11个月前 (01-01) 144次浏览 0个评论 扫描二维码
文章目录[隐藏]

iframe优点

1、可以跨域请求其他网站;
2、像是一个浏览器,能显示完整的网页。

iframe缺点

1、window.location.href 失效,
2、域名是https,那么iframe里的网页都必须是https(css/js的外部引用也必须是https),不允许http;
3、一些调用外部应用的链接,会失效。

iframe 示例

代码结构

https问题

问题:域名是https,那么iframe里的网页都必须是https(css/js的外部引用也必须是https),不允许http;
解决:
1、nginx将http请求强制升级为https;
2、在html的head添加meta,页面所有http强制升级为https

3、服务端请求网页再输出。
如:新建turn.php

iframe的src指向php

(移动端)window.location.href 失效、调用外部应用的链接失效 与 父子页面

iframe 里的页面window.location.href 会失效,调用外部应用的链接失效。这是父子页面引起的,iframe里的的页面是子页面,iframe嵌入的html是父页面。

iframe子页面中的window.location.href 需要改成top.location.hrefparent.location.href
window.location.href : 在本页面打开。
top.location.href : 最顶层父页面打开。
parent.location.href : 在最近的父页面打开。

监听iframe页面加载

iframe有个监听事件:onload监听iframe里的页面是否完全加载

iframe父子页面交互 — 获取元素

提示:
1、仅限于同域名,跨域会报错;
2、父获取子,一定要等iframe加载完再去获取里面的元素。

js版

父获取子

子获取父

 

jq版

父获取子

子获取父

利用iframe监听事件onload,等待页面加载完再获取

iframe父子页面交互 — 调用方法

子页面调用父页面方法

sayAtParent() :是父页面的方法;

sayAtSon() :是子页面的方法;

js版

jq版

父页面调用子页面方法

提示:
父调用子方法,一定要等子页面加载完,否则会报方法不存在

js版

jq版

window、parent、top 与 如果有多个父页面,如何调用指定的父页面

window:当前页面。
parent:上级父页面。
top :顶层父页面。

调用指定的父页面

子页面如何判断是否有父页面

判断父页面是否存在特定的方法

参考

iframe父子页面-获取元素、调用方法


文章 iframe 与 父子页面的交互 转载需要注明出处
喜欢 (0)

您必须 登录 才能发表评论!