iframe相关

本文介绍了网页导航的基本方法,包括使用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";
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值