iframe相关

最新推荐文章于 2025-07-29 15:49:21 发布

iteye_12132

最新推荐文章于 2025-07-29 15:49:21 发布

阅读量99

点赞数

分类专栏： JavaScript 文章标签： Go 浏览器 .net

JavaScript 专栏收录该内容

117 篇文章

订阅专栏

本文介绍了网页导航的基本方法，包括使用document.referrer与document.location.href进行页面跳转，利用history对象实现前进后退功能。此外，还详细阐述了如何在iframe间进行变量访问与函数调用，并提供了iframe自适应高度的两种解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[b]1.页面之间的简单跳转:[/b]
1-1.可以利用document.referrer属性与document.location.href属性来实现.
1-2.利用history对象来实现:

		//go back one page
		history.go(-1);
		//go forward one page
		history.go(1);
		//go forward two pages
		history.go(2);
		//go to nearest wrox.com page
		history.go('wrox.com');
		//go to nearest nczonline.net page
		history.go('nczonline.net');
		//go back one page
		history.back();
		//go forward one page
		history.forward();

2.在[b]top[/b]页面中定义的全局变量/函数，在frame中可以通过获取其它frame的window对象，然后执行访问。

window.frames 包含了页面的所有的iframe/frame;
frame[i] 都代表了对应页面的window对象。
top 对象用于指向浏览器中最外层的frame，也就是浏览器窗口。
即：

alert(top === top.window)//true

[b]注意[/b]：如果采用var iframe=getElementById(iframeId)方法获取Iframe，得到的是一个HTML下的DOM对象，需要使用 iframe.contentWindow 才可以获取该iframe下的window对象。
在子frame中访问其它的frame的方式：

	var someFrame = top.frames[i];//或者通过frame的name属性访问
	someFrame.varName //访问某个全局变量
	someFrame.fn()//执行某个全局函数 .

[b]3.全局变量为parent，用于访问frame的父级frame.[/b]

最外层的frame,parent等于自己。如果仅存在一层frame嵌套，则top可以用parent替代。

[b]4.另一个全局变量self,指向本身页面window。[/b]

alert(self == window)

[b]5.判断页面是否存在iframe。[/b]
alert(window.frames.length)

[b]6.访问iframe所在页面的内容。[/b]
var f = document.getElementById('bframe');
var doc = f.contentDocument ? f.contentDocument : f.contentWindow.document;
alert(doc.body.innerHTML)

[b]7.iframe高度自适应的一种解决方法。[/b]


function reinitIframe(){
	var iframe = document.getElementById("targetFrame");
	try{
		var doc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document; 
		var bHeight = doc.body.scrollHeight;
		var dHeight = doc.documentElement.scrollHeight;
		var height = Math.max(bHeight, dHeight);
		iframe.height =  height;
	}catch (ex){}
}
window.setInterval("reinitIframe()", 200);

[b]8.iframe高度自适应的解决方法二。[/b]


<iframe id="aaa" name="aaa" src="login.html" onload="javascript:resizeIframe(this)" onbeforeunload="javascript:beforeUnload(this)" scrolling="no" frameborder=0 border=0 style="overflow:hidden;"/>


function resizeIframe(obj) {
  obj.style.visibility = "visible";
  obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
  obj.contentWindow.document.onclick = function(e){
	  e = e || window.event;
	  var el = e.srcElement || e.target;
	  if(el.tagName && el.tagName.toUpperCase() === "A" && el.href.indexOf("#")!== 0){
		  obj.style.visibility = "hidden";
		  obj.style.height = "1px";
	  }
  }
}
function beforeUnload(obj){
	obj.style.height = "1px";
}