我們的項目有一個這樣的特點，就是頂部，底部，側欄部分全都是固定的也就是中間部分隨着側欄或頂欄的選擇和出現不同的頁面，在這種情況下我學習了一個標籤，叫做iframe，今天我們來好好研究它。
什麼是iframe？
iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架），也就是說iframe是一個框架，它嵌套在一個頁面內部。就像我們的項目，根據選項的不同只需要切換iframe鏈接的頁面而不用換取整個頁面，這也就大大的減少了代碼量。
iframe的屬性
如下圖所示：
在html代碼裏經常這樣寫：
<iframe id="iframeid" src="XX.html" width="XX" height="XX"></iframe>這幾個相當於是必須的吧，其他的像scrolling，frameborder等需要的時候根據表格屬性添加就好了。
父子元素的互訪
雖然有iframe標籤，但是畢竟是頁面裏嵌套了另外一個頁面，如果父頁面要獲取iframe標籤裏子頁面的內容，那應該咋辦？我們來看看能不能通過dom訪問。
<!DOCTYPE html>
<html>
<head>
<title>iframe</title>
</head>
<body>
<button id="btn">Click me!</button>
<p>Hello!this is parent window!</p>
<iframe id="iframeid" src="./css-sanjiao.html" width="600" height="600"></iframe>
<script type="text/javascript">
var iframe =document.getElementsByTagName('iframe')[0];
console.log(iframe);
</script>
</body>
</html>輸出是什麼結果呢？來我們看看！
是這樣子的，標籤下套了一個html文件，裏面的元素再也無法訪問。看起來貌似還跨域咧。NO！so easy，就幾行代碼就OK咧。
父頁面：
<!DOCTYPE html>
<html>
<head>
<title>iframe</title>
</head>
<body>
<button id="btn">Click me!</button>
<p>Hello!this is parent window!</p>
<iframe id="iframeid" src="./css-sanjiao.html" width="600" height="
600"></iframe>
<script type="text/javascript">
var oBtn = document.getElementById('btn');
oBtn.addEventListener('click',function(){
alert(document.getElementById('iframeid').contentWindow.document.getElementById('child').innerHTML)},false);
</script>
</body>
</html>子頁面：
<!DOCTYPE html>
<html>
<head>
<title>css三角符號</title>
<style type="text/css">
#demo {
width:0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
.div1{
width: 200px;
height: 200px;
background: #fff;
position: relative;
border:1px solid skyblue;
}
.div1:after,.div1:before{
border:solid transparent;
content: '';
height: 0;
left: 100%;
position: absolute;
width: 0;
}
.div1:after{
border-left-color:#fff;
border-width: 20px;
top: 20px;
}
.div1:before{
border-left-color:skyblue;
border-width: 22px;
top: 18px;
}
</style>
</head>
<body>
<div id="child">Hi!this is Child!</div>
<div class="div1"></div>
<div id="demo"></div>
</body>
</html>頁面是這個樣子的：
點擊click按鈕，彈出子頁面中p標籤裏的內容。如圖：
下來我們來看看子元素訪問父元素的情況：
父頁面：
<!DOCTYPE html>
<html>
<head>
<title>iframe</title>
</head>
<body>
<p id="father">Hello!this is parent window!</p>
<iframe id="iframeid" src="./css-sanjiao.html" width="600" height="
600"></iframe>
</body>
</html>子頁面：
<!DOCTYPE html>
<html>
<head>
<title>css三角符號</title>
<style type="text/css">
#demo {
width:0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
.div1{
width: 200px;
height: 200px;
background: #fff;
position: relative;
border:1px solid skyblue;
}
.div1:after,.div1:before{
border:solid transparent;
content: '';
height: 0;
left: 100%;
position: absolute;
width: 0;
}
.div1:after{
border-left-color:#fff;
border-width: 20px;
top: 20px;
}
.div1:before{
border-left-color:skyblue;
border-width: 22px;
top: 18px;
}
</style>
</head>
<body>
<div id="child">Hi!this is Child!</div>
<div class="div1"></div>
<div id="demo"></div>
<button id="btn">Click me!</button>
<script type="text/javascript">
var oBtn = document.getElementById('btn');
oBtn.addEventListener('click',function(){
alert(window.parent.document.getElementById("father").innerHTML);
});
</script>
</body>
</html>效果如圖：
避免iframe
iframe是迫不得已才使用的，因爲iframe會帶來較多的問題，有的瀏覽器甚至可以將iframe當作廣告屏蔽。這只是其中的一點缺點就是兼容問題，另外還有許多，比如從用戶角度考慮的，從網頁框架結構考慮的等等，網上有大批的缺點解析，我就不再一一列舉。