目录
文章目录[隐藏]
iframe优点
1、可以跨域请求其他网站；
2、像是一个浏览器，能显示完整的网页。
iframe缺点
1、window.location.href 失效，
2、域名是https，那么iframe里的网页都必须是https（css/js的外部引用也必须是https），不允许http;
3、一些调用外部应用的链接，会失效。
iframe 示例
代码结构
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!DOCTYPE html> <html> <head> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <meta name="format-detection" content="telephone=no" /> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>iframe 测试</title> <script src="./js/jquery-1.10.2.min.js"></script> <body> <!-- 固定头部菜单 --> <div class="flex_top"> <div class="user_menu"> <div class="left"> <div class="img"> <img src="images/new-icon/user.png"> </div> <div class=""> <h6>暗夜右黑暗巨魔</h6> <p>ID：1651641</p> </div> </div> <div class="right"> <ul> <li class="cur"> <a href="#"> <img src="images/new-icon/menu_1cur.png"> <p>游戏</p> </a> </li> <li> <a href="#"> <img src="images/new-icon/menu_2.png"> <p>礼包</p> </a> </li> <li> <a href="#"> <img src="images/new-icon/menu_3.png"> <p>公告</p> </a> </li> <li> <a href="#"> <img src="images/new-icon/menu_4.png"> <p>客服</p> </a> </li> </ul> </div> </div> </div> <!-- 固定头部菜单 --> <!-- 固定头部菜单 --> <div class="contentBox"> <iframe width="100%" height="100%" src="用户中心.html"></iframe> </div> <!-- 固定头部菜单 --> </body> </html> |
https问题
问题：域名是https，那么iframe里的网页都必须是https（css/js的外部引用也必须是https），不允许http;
解决：
1、nginx将http请求强制升级为https;
2、在html的head添加meta，页面所有http强制升级为https
|
1 2 3 |
<head> <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> </head> |
3、服务端请求网页再输出。
如：新建turn.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
if (isset($_GET['url']) && !empty($_GET['url'])) { $url = $_GET['url']; // 获取网页内容 (不要用file_get_contents,会乱码) $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 10); curl_setopt($curl, CURLOPT_ENCODING, 'gzip'); $content = curl_exec($curl); curl_close($curl); // TODO 可以对网页内容进行修改，再输出 // 输出网页 die($content); } |
iframe的src指向php
|
1 |
<iframe width="100%" height="100%" src="https://localhost/turn.php?url=http://www.baidu.com"></iframe> |
（移动端）window.location.href 失效、调用外部应用的链接失效 与 父子页面
iframe 里的页面window.location.href 会失效，调用外部应用的链接失效。这是父子页面引起的，iframe里的的页面是子页面，iframe嵌入的html是父页面。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!-- 整个html是iframe的父页面 --> <!DOCTYPE html> <html> <head> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <meta name="format-detection" content="telephone=no" /> <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>iframe 测试</title> <script src="./js/jquery-1.10.2.min.js"></script> <body> <div class="flex_top"> </div> <div class="contentBox"> <!-- iframe 里都是子页面--> <iframe width="100%" height="100%" src="用户中心.html"></iframe> </div> </body> </html> |
iframe子页面中的window.location.href 需要改成top.location.href或parent.location.href。
window.location.href ： 在本页面打开。
top.location.href ： 最顶层父页面打开。
parent.location.href ： 在最近的父页面打开。
监听iframe页面加载
iframe有个监听事件：onload。监听iframe里的页面是否完全加载。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!-- 整个html是iframe的父页面 --> <!DOCTYPE html> <html> <body> <div class="flex_top"> </div> <div class="contentBox"> <!-- iframe 里都是子页面--> <iframe width="100%" height="100%" src="https://www.baidu.com" onload="iframeContent()"></iframe> </div> </body> <script> // onload调用的方法 function iframeContent() { console.log("页面已加载完毕！"); } </script> </html> |
iframe父子页面交互 — 获取元素
提示：
1、仅限于同域名，跨域会报错；
2、父获取子，一定要等iframe加载完再去获取里面的元素。
js版
父获取子
|
1 2 3 4 5 6 |
var ifra = document.getElementById("iframe的id"); ifra.contentWindow.document // 关键，iframe子页面的document对象 // 示例 ifra.contentWindow.document.getElementById(" iframe子页面元素id"); ifra.contentWindow.document.getElementsByTagName(' iframe子页面元素标签名')[0].innerHTML; |
子获取父
|
1 2 3 4 |
window.parent.document // 关键，父窗口文档对象 window.parent.document.getElementById("父窗口元素id") window.parent.document.getElementsByClassName('父窗口元素class"') |
jq版
父获取子
|
1 2 3 4 5 6 |
var subContent = $('iframe的id/class').contents(); // 关键，获取子页面docment对象 // 获取子页面script标签内容 subContent.find('script').text(); // 获取iframe页面当前连接 var curUrl = subContent[0].location; |
子获取父
|
1 2 3 4 5 |
$("#/.父窗口元素id/class/tagName",window.parent.document); // 关键 // 示例 $('#list', window.parent.document); $('.item-2', window.parent.document).find('a').text(); |
利用iframe监听事件onload，等待页面加载完再获取
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!-- 整个html是iframe的父页面 --> <!DOCTYPE html> <html> <body> <div class="flex_top"> </div> <div class="contentBox"> <!-- iframe 里都是子页面--> <iframe width="100%" height="100%" src="https://www.baidu.com" onload="iframeContent()" id="contentBoxIframe"></iframe> </div> </body> <script> // onload调用的方法 function iframeContent() { console.log("页面已加载完毕！"); // 获取子页面元素（仅限于同域名，跨域会报错） var subContent = $('#contentBoxIframe').contents(); // 获取子页面script标签内容 console.log(subContent.find('script').text()); // 获取iframe页面当前连接 var curUrl = subContent[0].location; } </script> </html> |
iframe父子页面交互 — 调用方法
子页面调用父页面方法
sayAtParent() ：是父页面的方法；
sayAtSon() ：是子页面的方法；
js版
|
1 2 |
// 先通过window.parent获取到父元素，在调用该对象上的方法 window.parent.sayAtParent(); |
jq版
|
1 |
$(window.parent)[0].sayAtParent(); |
父页面调用子页面方法
提示：
父调用子方法，一定要等子页面加载完，否则会报方法不存在
js版
|
1 2 |
var ifra = document.getElementById("iframe的id"); ifra.contentWindow.sayAtSon(); // 先获取到子页面的window对象，然后在调用 |
jq版
|
1 2 |
// 要子页面加载完成才能调用，需配合iframe的onload使用 $("iframe的id/class/tagName")[0].contentWindow.sayAtSon(); |
window、parent、top 与 如果有多个父页面，如何调用指定的父页面
window：当前页面。
parent：上级父页面。
top ：顶层父页面。
调用指定的父页面
|
1 2 3 4 5 6 7 8 9 10 11 |
// js // 上上级父页面（有几层父页面，就加多少个parent） window.parent.parent.document // 顶层父页面 top.document // jq // 上上级父页面（有几层父页面，就加多少个parent） $('父页面的id/class/tagName', window.parent.parent.document); // 顶层父页面 $('父页面的id/class/tagName',top.document); |
子页面如何判断是否有父页面
|
1 2 3 |
if(top.location!==self.location) { console.log('当前页面，有父页面'); } |
判断父页面是否存在特定的方法
|
1 2 3 4 |
if (window.parent.sayAtParent) { // 如果有父页面有sayAtParent()这个方法，就调用 window.parent.sayAtParent(); } |
参考
文章 iframe 与 父子页面的交互 转载需要注明出处
