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>
ååä¸iframeé«åº¦èªéåº--->详ç»é¾æ¥ï¼ç¹å»è¿é
åæé¾æ¥--->ç¹å»è¿é