iframe的基本應用

2016-01-14

5264
0
2016-12-07

iframe可以不受當前頁面的javascript及css影響，自行運作自己的code

若你要快速鑲嵌一個網頁，且不想考慮是否與原頁面相容

又或者這是一個暫時性很快就會更換掉的網頁

那你可以試試iframe

iframe html的基本語法.

常用不外乎邊框、卷軸顯示跟frame margin距離，大概就這樣吧

<iframe id="IframeContent" src="網址"  style="width:100%;" scrolling="卷軸" frameborder="邊框" marginwidth="0" marginheight="0" ></iframe>

其他詳細的屬性設定可以參考這裡(w3schools)

父頁面與iframe之間的溝通方式

剛剛說到iframe與父頁面其實是不會互相影響的

但是我想控制iframe內容或者想控制父頁面那該怎麼辦?

其實還是辦的到的，我們直接來看範例

假設有A、B兩個網頁如下:

A網頁

<body>
	<iframe id="IframeContent" src="B.html"></iframe>
	<div id = "component"></div>
	
	<script>
	var IframeContent = $("#IframeContent");

	//控制iframe內的元素及方法
	function ControlIframe() {
		var html = "想產生的元件";
		IframeContent.contents().find("#container").append(html);
		
		//呼叫iframe內的方法
		$iframe.get(0).contentWindow.iframeMethod();
	}
	
	//產生元件於component內
	function SetComponent(element) {
		$("#component").html(element);
	}

	</script>
</body>

B網頁(就是A網頁iframe內容)

<body>
	<div id="container">
		網頁內容
	</div>
	
	<script>
	if (window.parent && window.parent.SetComponent){
		var element = "想產生的元件";
		window.parent.SetComponent(element);	//呼叫父頁面的SetComponent方法
	}
	
	function AlertMethod(){
		alert("iframe的方法");
	}
	</script>
</body>

父頁面需透過contents()及contentwindow存取iframe內的東西

而子頁面則需透過window.parnet存取父頁面的元素

簡單的範例提供給大家參考一下

謝謝大家

回首頁