iframe 用于在網(wǎng)頁內(nèi)顯示網(wǎng)頁。
添加iframe語法
<iframe src="URL"></iframe>
URL 指向隔離頁面的位置。
Iframe - 設置高度和寬度
height 和 width 屬性用于規(guī)定 iframe 的高度和寬度。
屬性值的默認單位是像素，但也可以用百分比來設定（比如 "80%"）。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Iframe - 刪除邊框
frameborder 屬性規(guī)定是否顯示 iframe 周圍的邊框。
設置屬性值為 "0" 就可以移除邊框：
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
使用 iframe 作為鏈接的目標
iframe 可用作鏈接的目標（target）。
鏈接的 target 屬性必須引用 iframe 的 name 屬性：
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a target="iframe_a">W3School.com.cn</a></p>
可選屬性
image
iframe透明
在ie6/7/8下引入iframe的時候，它的背景默認是白色，即使設置了style=”background-color:transparent;”也無效，
但是其他瀏覽器(firefox,chrome,opera,ie9)都正常顯示，要解決這個兼容性問題，必須用到一個屬性。
給iframe設置屬性：allowTransparency=”true” //設置為true允許透明,就可以解決
<body style="background-color:#00f;">
<iframe allowTransparency="true" frameborder="0" height="200" width="200" src="son.html"
scrolling="yes" id="myiframe"></iframe>
</body>
高度自適應和父子之間通信，兄弟之間通信。
iframe.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="調(diào)用子級方法" id="btn">
<div class="main">
<iframe src="index.html" frameborder="0" scrolling="no" name="win" id="win"></iframe>
</div>
</body>
<script>
//解決高度自適應
function setIframeHeight(iframe) {
if (iframe) {
//獲取子級window
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
//獲取子級的高度賦值給iframe
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
window.onload = function () {
setIframeHeight(document.getElementById('win'));
};
var btn = document.getElementById('btn');
var win = document.getElementById('win');
btn.onclick = function(){
win.contentWindow.hello();
}
function say(){
alert('ok')
}
function can(){
win.contentWindow.canS = 'hello'
}
can();
</script>
</html>
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要</p>
<p>主要1111111111111111111111111111</p>
<button id="btn">調(diào)用父級方法</button>
<button id="btn1">獲取父級參數(shù)</button>
</body>
<script>
//console.log(document.domain)
//document.domain = 'demo.com';
var btn = document.getElementById('btn');
var btn1 = document.getElementById('btn1');
btn.onclick = function(){
parent.say();
}
function hello(){
alert('yes')
}
function getcan(){
alert(window.canS)
}
btn1.addEventListener('click',getcan,false);
</script>
</html>
tab.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>我的</p>
<button id="btn2">兄弟之間的調(diào)用</button>
</body>
<script>
//ar win = document.getElementById('win');
var btn2 = document.getElementById('btn2');
function getcan1(){
//先獲取父級，然后接著找到對應的iframe
console.log(parent.win.contentWindow.hello())
}
btn2.addEventListener('click',getcan1,true);
</script>
</html>
