js中parent,top,self的区别

JavaScript015

js中parent,top,self的区别,第1张

1、parent常用在iframe和frame中的子页面访问父页面中的对象

2、top :一个页面可能会有很多层,top是指最顶层的框架

3、self :是指当前窗口

<script type="text/javascript">

$(document).ready(function() {

$("span").toggle(function() {

$(this).parent().parent().parent().parent().parent().next().hide('slow')

}, function() {

$(this).parent().parent().parent().parent().parent().next().show('slow')

})

})

//jQuery为了兼容浏览器,自动会在table标签里加入<tbody>标签,因为FF相对于IE对table标签解析要麻烦些的,所有js代码里要多加一层.parent()

//所有你以后写HTML代码时,要注意兼容各个浏览器,比如写table时记得加上thead,tbody标签,这样更能遵循W3C标准

你这段代码是两个页面...

第一个页面:

<html>

<frameset id="myFrameset" cols="50%,50%">

<frame id="leftFrame" src="frame_a_noresize.htm">

<frame id="rightFrame" src="frame_a.htm">

</frameset>

</html>

然后,frame_a.htm页面的代码用下面这段:

<html>

<head>

<script type="text/javascript">

function disableResize()

{

parent.document.getElementById("leftFrame").noResize=true

parent.document.getElementById("rightFrame").noResize=true

}

function enableResize()

{

parent.document.getElementById("leftFrame").noResize=false

parent.document.getElementById("rightFrame").noResize=false

}

</script>

</head>

<body bgcolor="#EFE7D6">

<form>

<input type="button" onclick="disableResize()" value="No resize">

<input type="button" onclick="enableResize()" value="Resize">

</form>

<p>Try to resize the frame.</p>

<p>Right-click inside the two frames and select "View Source" to see the source code.</p>

</body>

</html>