明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

文章發(fā)布

資訊首頁騰訊視頻愛奇藝暴風(fēng)影音酷狗音樂酷我音樂影音大全軟件下載軟件教程電腦系統(tǒng)下載

聊天工具辦公軟件殺毒教程系統(tǒng)工具圖形圖像電腦學(xué)習(xí)應(yīng)用軟件網(wǎng)絡(luò)軟件蘋果應(yīng)用注冊碼網(wǎng)站教程技術(shù)開發(fā)安卓教程其它教程

您當(dāng)前所在位置：網(wǎng)視手游站 -> 網(wǎng)站教程 -> html iframe使用的實戰(zhàn)總結(jié)分享

html iframe使用的實戰(zhàn)總結(jié)分享

發(fā)表時間：2023-12-29 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]說在前面的話，iframe是可以做很多事情的。例如：a>通過iframe實現(xiàn)跨域;b>使用iframe解決IE6下select遮擋不住的問題c>通過iframe解決Ajax的前進(jìn)后退問題d>通過iframe實現(xiàn)異步上傳。(Easyui中form組件就是用的iframe，實現(xiàn)...

說在前面的話，iframe是可以做很多事情的。
例如：
a>通過iframe實現(xiàn)跨域;
b>使用iframe解決IE6下select遮擋不住的問題
c>通過iframe解決Ajax的前進(jìn)后退問題
d>通過iframe實現(xiàn)異步上傳。(Easyui中form組件就是用的iframe，實現(xiàn)表單提交時，可以提交上傳域)
下面就一些問題一一論述。

1、iframe基本知識：

iframe 元素會創(chuàng)建包含另外一個文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）。
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。
提示：您可以把需要的文本放置在 <iframe> 和 </iframe> 之間，這樣就可以應(yīng)對無法理解 iframe 的瀏覽器。

<iframe width=420 height=330 frameborder=0 scrolling=auto src="URL"></iframe>

可選屬性：

html iframe使用的實戰(zhàn)總結(jié)分享

標(biāo)準(zhǔn)屬性：

html iframe使用的實戰(zhàn)總結(jié)分享

2、操作iframe：

   注：測試環(huán)境IE：8.0，F(xiàn)F：23.0.1
   a>隱藏iframe表框
		i>標(biāo)簽中設(shè)置：frameborder="0",<iframe frameborder="0" width="400" height="400" src="http://blog.csdn.net/cuew1987" scrolling="no"></iframe>
		ii>DOM操作：
			<body>
			<iframe frameborder="1" width="400" height="400" src="http://blog.csdn.net/cuew1987" scrolling="no" id="myiframe"></iframe>
			<script>
			var myiframe = document.getElementById("myiframe");
			myiframe.style.border="none";//FF下有效，IE下無效 
			myiframe.setAttribute("frameborder",0);//FF下有效，IE下無效 
			myiframe.frameBorder = 0;//FF下有效，IE下無效 
			</script>
			</body>
   b>動態(tài)創(chuàng)建iframe
   <script>
		var newFrame = document.createElement("iframe");
		newFrame.src ="http://blog.csdn.net/cuew1987";
		newFrame.frameBorder = 0;//FF、IE隱藏邊框有效
		newFrame.width = "400px";
		newFrame.height = "400px";
		newFrame.scrolling = "no";
		document.body.appendChild(newFrame);
   </script>
   c>獲取iframe
		i>var obj = document.getElementById("iframeID");
		  獲取iframe對象，可直接操作iframe標(biāo)簽屬性,如只想改變iframe的 src 或者 border ，scrolling 等attributes
		ii>var dom = frames["iframeName"];
		   獲取iframe的DOM對象，此對象可用來操作對象，比如想操作iframe頁面中的元素。
    d>獲取iframe中的window對象
		function getIframeWindow(obj) {
			//IE    w3c
			return obj.contentWindow    obj.contentDocument.parentWindow;
			//parentWindow 是 parent window object
		}
		document.getElementById取到的iframe是不能直接操作里面的document的，只能這樣�。�
		IE:frames[id].document或obj.contentWindow.document;
		FF:dom.contentDocument或obj.contentDocument;不綁定任何事件.
	e>獲取iframe頁面高度
		function getIframeHeight(obj){
			var idoc = getIframeWindow(obj).document; 
			if(idoc.body){
				return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);   
			}else if(idoc.documentElement){
				return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);   
			}
		}
	f>父子頁面互訪
		i>子訪問父：
			parent.html:
			<body>
				<p>等到的信息：<p id="msg"></p></p>
				<iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>
			</body>
			son.html:
			<body>
			<input type="button" onClick="setMsg()" value="setMsg">
			<script>
			function setMsg(){
				var msg = window.parent.document.getElementById("msg");
				msg.innerHTML= "Hello world!!";
			}
			</script>
			</body>
		ii>父訪問子：
			parent.html:
			<body>
			<p>等到的信息：<p id="setMsg"></p></p>
			<input type="button" value="setMsg" onClick="setMsg()"><br>
			<iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>
			<script type="text/javascript">
			function setMsg(){
				var obj = document.getElementById("myiframe");
				var msg = getIframeWindow(obj).document.getElementById("msg");
				document.getElementById("setMsg").innerHTML = msg.innerHTML;
			}
			</script>
			</body>
			son.html:
			<body>
			<p id="msg">Hello world!!!</p>
			</body>

3.iframe高度自適應(yīng)和跨域：

實際使用iframe中，會遇到iframe高度的問題，由于被嵌套的頁面長度不固定而顯示出來的滾動條，不僅影響美觀，還會對用戶操作帶來不便
	a>同域下的高度自適應(yīng)
	parent.html:
	<body>
	<iframe width="400" id="myiframe" onload="setHeight()" height="1" frameborder="0" src="son.html"></iframe>
	<script type="text/javascript">  
	function getIframeWindow(obj) {
		return obj.contentWindow    obj.contentDocument.parentWindow;
	}
	function getIframeHeight(obj){
		var idoc = getIframeWindow(obj).document; 
		if(idoc.body){
			return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);   
		}else if(idoc.documentElement){
			return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);   
		}
	}
	function setHeight(){   
		var myiframe = document.getElementById("myiframe");
		myiframe.height = getIframeHeight(myiframe);
	} 
	</script> 
	</body>
	另：document.documentElement與document.body相關(guān)說明(W3C DOM2.0規(guī)范)
	document.doucmentElement:
		documentElement of type Element, readonly,This is a convenience attribute that allows direct access to the 
		child node that is the root element of the document. For HTML documents, this is the element with the tagName "HTML".
	document.body:
		document.body is the element that contains the content for the document. In documents with <body> contents, returns the <body> element, 
		and in frameset documents, this returns the outermost <frameset> element.
		Though body is settable, setting a new body on a document will effectively remove all the current children of the existing <body> element.
	IE在怪異模型（Quicks Mode）下document.documentElement無法正確取到clietHeight scrollHeight等值，比如clientHeight=0。
	獲取scrollTop:
	var sTop=Math.max(
		(document.body?document.body.scrollTop:0),
		(document.documentElement?document.documentElement.scrollTop:0),
		(window.pageYOffset?window.pageYOffset:0)
	);    

	b>跨域下高度自適應(yīng)
	頁面：
	index.html:(http://www.csdn.net)
	<iframe width="400" id="myiframe" onload="setHeight()" height="1" frameborder="0" src="son.html"></iframe>
	son.html:
	<body >
	<iframe id="agentIframe" style="position:absolute; top:-10000;left:-1000;" height="10" width="100%"></iframe>
	</body>
	<script>
		function getHeight(){
			var idoc = document; 
			if(idoc.body){
				return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);   
			}else if(idoc.documentElement){
				return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);   
			}
		}
		window.onload = function(){
			var h = getHeight();
			document.getElementById("agentIframe").src="http://www.csdn.net#"+h;
		}
	</script>
	agent.html:(http://www.csdn.net)
	<script>
	(function(){
		var con = parent.parent.document.getElementById('frame_content');     
		var href = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;      
		con.style.height = href.split("#")[1]+"px";
	})();
	</script>

4.iframe背景透明：

在ie6/7/8下引入iframe的時候，它的背景默認(rèn)是白色，即使設(shè)置了style=”background-color:transparent;”也無效，
但是其他瀏覽器(firefox,chrome,opera,ie9)都正常顯示，要解決這個兼容性問題，必須用到一個屬性。
下面來看看現(xiàn)象：

index.html:
<body style="background-color:#00f;">
<iframe frameborder="0" height="200" width="200"  src="son.html" scrolling="yes" id="myiframe" 
style="background-color:transparent;"></iframe>
</body>

結(jié)果如下圖：(FF中有滾動條是因為在index.html中設(shè)置了有滾動條)

html iframe使用的實戰(zhàn)總結(jié)分享

解決：
給iframe設(shè)置屬性：allowTransparency=”true” //設(shè)置為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不設(shè)置此屬性時，可使用iframe解決在IE6、7環(huán)境中遮住select

5.判斷頁面中是否有iframe:

	a>首先來看看window.frameElement這個屬性。
		返回嵌入當(dāng)前window對象的元素(比如 <iframe> 或者 <object>),即為包含本頁面的iframe或frame對象。如果當(dāng)前window對象已經(jīng)是頂層窗口,則返回null.
		看看一個例子：
		parent.html:
		<body>
		<iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>
		</body>
		son.html:(注意frameElement用在son.html中，如果用在parent.html中,則返回null)
		<body>
		<p id="msg">Hello world!!!</p>
		<script type="text/javascript">
			var iframe = window.frameElement;
			if(iframe){
				iframe.src = "http://blog.csdn.net/cuew1987";
			}
		</script>
		</body>
		備注：雖然該屬性名為frameElement,但該屬性也會返回其他類型比如 <object> 或者其他可嵌入窗口的元素.
	b>兼容性如下圖：

html iframe使用的實戰(zhàn)總結(jié)分享

	c>定義函數(shù)：
		i>判斷父頁面中是否含有iframe
		function hasIframe(){
			return document.getElementsByTagName("iframe").length > 0;
		}
		ii>判斷某個頁面是否在iframe標(biāo)簽中
		function innerIframe(){
			var iframe = window.frameElement;
			if(iframe){
				return typeof iframe !== "undefined";
			}
		}

6、HTML5中iframe：

HTML 4.01 與 HTML 5 之間的差異在 HTML 5 中，僅僅支持 src 屬性
<iframe src="/index.html"></iframe>
HTML5中全局屬性：

html iframe使用的實戰(zhàn)總結(jié)分享

7、easyui中form組件提交(包括上傳域)：

	function submitForm(target, options) {
		options = options    {};
		if (options.onSubmit) {
			if (options.onSubmit.call(target) == false) {
				return;
			}
		}
		var form = $(target);
		if (options.url) {
			form.attr("action", options.url);
		}
		var frameId = "easyui_frame_" + (new Date().getTime());
		var frame = $("<iframe id=" + frameId + " name=" + frameId + "></iframe>").attr(
				"src",
				window.ActiveXObject ? "javascript:false" : "about:blank").css(
				{
					position : "absolute",
					top : -1000,
					left : -1000
				});
		var t = form.attr("target"), a = form.attr("action");
		form.attr("target", frameId);//在iframe中提交表單
		try {
			frame.appendTo("body");
			frame.bind("load", cb);
			form[0].submit();
		} finally {
			form.attr("action", a);
			t ? form.attr("target", t) : form.removeAttr("target");
		}
		var checkCount = 10;
		function cb() {
			frame.unbind();
			var body = $("#" + frameId).contents().find("body");
			//contents()查找匹配元素內(nèi)部所有的子節(jié)點（包括文本節(jié)點）。如果元素是一個iframe，則查找文檔內(nèi)容
			var data = body.html();
			if (data == "") {
				if (--checkCount) {
					setTimeout(cb, 100);
					return;
				}
				return;
			}
			var ta = body.find(">textarea");
			if (ta.length) {
				data = ta.val();
			} else {
				var pre = body.find(">pre");
				if (pre.length) {
					data = pre.html();
				}
			}
			if (options.success) {
				options.success(data);
			}
			setTimeout(function() {
				frame.unbind();
				frame.remove();
			}, 100);
		};
	};
	另：form 的target屬性：
	a>HTML4中：
	定義和用法：target 屬性規(guī)定在何處打開 action URL。
	兼容性：在 HTML 4.01 中，不贊成使用 form 元素的 target 屬性；在 XHTML 1.0 Strict DTD 中，不支持該屬性。
	屬性值：
	_blank 新窗口中打開
	_self  默認(rèn)，在相同的框架中打開
	_parent 父框架中打開
	_top    整個窗口中打開
	framename  指定的frame name屬性值的框架中打開

	b>HTML5中：
	HTML 4.01 與 HTML 5 之間的差異
	在 HTML5 中 target 屬性不再是被廢棄的屬性。不再支持 frame 和 frameset。
	現(xiàn)在，parent, top 和 framename 值大多用于 iframe。

8、網(wǎng)上問題收集：

a>window.frameElement在chrome下undefined?

問題描述：
今天在重新編寫我的日歷組件的時候，由于用到使用iframe自定義屬性傳值，
將父頁面的值寫在iframe 自定義屬性上，然后在iframe頁面中使用 window.frameElement.getAttribute() 獲取，
奇怪的是之前編寫的日歷控件代碼一直都這樣寫，沒有發(fā)生過錯誤，但是今天在chrome里面 window.frameElement 竟然是 undefined，
在firefox 甚至IE6下都沒有問題，后來百度沒有答案，再google 也，沒有答案。
解決：
最后自己根據(jù)以往經(jīng)驗想到或許是本地調(diào)試權(quán)限問題，于是打開apache使用域名的形式訪問，果然可以了，呵呵！

以上就是html iframe使用的實戰(zhàn)總結(jié)分享的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。

標(biāo)簽：html iframe運用的實戰(zhàn)總結(jié)分享

上一篇：html中對于iframe的allowTransparency屬性的詳細(xì)說明

下一篇：html中iframe簽的作用以及使用技巧詳細(xì)說明

html iframe使用的實戰(zhàn)總結(jié)分享

1、iframe基本知識：

可選屬性：

標(biāo)準(zhǔn)屬性：

2、操作iframe：

3.iframe高度自適應(yīng)和跨域：

4.iframe背景透明：

5.判斷頁面中是否有iframe:

6、HTML5中iframe：

7、easyui中form組件提交(包括上傳域)：

8、網(wǎng)上問題收集：

推薦資訊總?cè)藲獍?/span>

最新教程本月人氣

相關(guān)文章

html iframe使用的實戰(zhàn)總結(jié)分享

1、iframe基本知識：

可選屬性：

標(biāo)準(zhǔn)屬性：

2、操作iframe：

3.iframe高度自適應(yīng)和跨域：

4.iframe背景透明：

5.判斷頁面中是否有iframe:

6、HTML5中iframe：

7、easyui中form組件提交(包括上傳域)：

8、網(wǎng)上問題收集：

推薦資訊 總?cè)藲獍?/span>

最新教程 本月人氣

相關(guān)文章

1、iframe基本知識：

6、HTML5中iframe：

8、網(wǎng)上問題收集：

推薦資訊總?cè)藲獍?/span>

最新教程本月人氣