iframe簡單應用
iframe概念
<iframe src="ch.html" frameborder="0" name="iframe" id="iframe"></iframe>
iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架）。一般用來包含別的頁面，例如我們可以在我們自己的網站頁面加載別人網站或者本站其他頁面的內容。
iframe標籤的屬性
iframe常用屬性: 1.frameborder:是否顯示邊框，1顯示，0不顯示 2.height:框架作爲一個普通元素的高度，建議在使用css設置。 3.width:框架作爲一個普通元素的寬度，建議使用css設置。 4.name:框架的名稱，window.frames[name]時專用的屬性。 5.scrolling:框架的是否滾動。yes（始終顯示滾動條）,no（從不顯示滾動條）,auto（需要時顯示滾動條）。 6.src：內框架的地址，可以使頁面地址，也可以是圖片的地址。 7.srcdoc , 用來替代原來HTML body裏面的內容。但是IE不支持, 不過也沒什麼卵用 8.sandbox: 對iframe進行一些列限制，IE10+支持
簡單使用
直接在iframe標籤的src屬性中指定嵌套頁面例：
<div class="layui-body ">
<iframe src="https://www.baidu.com/" width="100%" height="100%" name="iframe" id="iframe"></iframe>
</div>
也可以修改src屬性嵌套自己項目中頁面
獲取iframe裏的內容
通過contentWindow和contentDocument兩個API獲取iframe的window對象和document對象。
var iframe = document.getElementById("iframe");
var window = iframe.contentWindow;
var doc = iwindow.document;
console.log("window"+iwindow);//獲取iframe的window對象
console.log("document"+idoc); //獲取iframe的document
console.log("html"+doc.documentElement);//獲取iframe的html
console.log("head"+doc.head); //獲取head
結合iframe的name屬性獲取window對象
var window=window.frames['iframw'];
console.log('window'+window); //獲取iframe的window對象
在iframe中獲取父級內容
window.parent 獲取上一級的window對象，如果還是iframe則是該iframe的window對象 window.top 獲取最頂級容器的window對象，即，就是你打開頁面的文檔 window.self 返回自身window的引用。
看圖理解
注意：自由操作iframe和父框架的內容(DOM). 但前提條件是同域. 如果跨域只能實現頁面跳轉
iframe簡單應用demo
結合layui來實現點擊點擊某個模塊局部跳轉刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<!--頭部標題及導航-->
<div class="layui-header">
<!--logo部分-->
<div class="layui-logo">iframe</div>
<!--頂部導航左側-->
<!--<ul class="layui-nav layui-layout-left ">
<li class="layui-nav-item"><a href="">最新活動</a></li>
<li class="layui-nav-item"><a href="javascript:;">產品</a></li>
<li class="layui-nav-item"><a href="">大數據</a></li>
<li class="layui-nav-item"><a href="javascript:;">解決方案</a></li>
<li class="layui-nav-item"><a href="">社區</a></li>
</ul><--></-->
<!--頂部導航右側-->
<div class="layui-layout-right">
<ul class="layui-nav">
<li class="layui-nav-item">
<a href="">個人中心<span class="layui-badge-dot"></span></a>
</li>
<li class="layui-nav-item">
<a href="">控制檯</a>
</li>
<!--當前登錄用戶信息-->
<li class="layui-nav-item">
<a href="javascript:;">退出</a>
</li>
</ul>
</div>
</div>
<!--側邊導航-->
<div class="layui-side layui-side-menu layui-larry-side layui-bg-black" id="larry-side">
<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="demo" style="margin-right: 10px;">
<li class="layui-nav-item layui-nav-itemed">
<a class="Item layui-this" href="ch.html" target="">中國</a>
</li>
<li class="layui-nav-item">
<a class="Item" href="bj.html" target="">北京</a>
</li>
<li class="layui-nav-item">
<a class="Item" href="sh.html" target="">上海</a>
</li>
<li class="layui-nav-item">
<a class="Item" href="gz.html" target="">廣州</a>
</li>
<li class="layui-nav-item">
<a class="Item" href="sz.html" target="">深圳</a>
</li>
</ul>
</div>
<!--中間內容區域-->
<div class="layui-body ">
<iframe name="iframe" id="iframe" src="ch.html" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</div>
<!--底部結尾-->
<div class="layui-footer layui-bg-green" id="larry-footer" style="text-align: center;">
堅守自己，奮鬥不息
</div>
</div>
</body>
<script>
$(function(){
//菜單點擊
$(".Item").on('click',function(){
/*頁面跳轉*/
var url = $(this).attr('href');
console.log(url);
$("#iframe").attr('src',url);
/*選中狀態*/
$(".Item").removeClass('layui-this');
$(this).addClass('layui-this');
return false;
});
});
</script>
</html>
ch.html其他頁面都一樣
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2>hello,中國</h2> </body> </html>