window的新认识
序言:
一直以为window是浏览器的窗口,所有对于window.location.href语句的使用就有些偏激,觉得是指浏览器的url的地址栏;其实这说在某种情况下也是正确的。下面来谈谈我的新的认识。
1.首先,对window对象的认识上,不仅是浏览器的窗口,还代表ifarme的框架,(对于不怎么用框架的可能就会遗忘这一点)
2.然后是在应用上,要实现跳转页面 。
平常的是在一个没有iframe的页面上,写如下代码:
window.location.href=url;
这样自然会在浏览器的窗口的url的位置跳转页面。但是对于有iframe的也页面,跳转的就不是改变浏览器的地址栏,而是iframe的url.下面是例子。
父页面:
<iframe src="children.html"></iframe>
子页面:
<a href='javascript:;'>点击跳转到孙子页面</a>
<script>
window.location.href=sun.html;
</script>
这样父页面有一个框架,框架的页面是子页面,点击子页面的链接,会跳到孙子页面。此时你查看地址栏却没有改变还是当初的父页面的地址。
下面来总结:上面说到了window是浏览器的窗口或是框架,总之就是说window是当前页面。location是当前页面的地址信息。那么对于点击子页面的链接来说,子页面就是当前页面,这是跳转到了孙子页面,但是你看不到地址栏的变化,因为此时的变化的是框架的地址。其实内存中的地址已经改变了,只不过你看不到。那么对于后退的也是同样的道里。history.go(-1);
3.对于跳转页面的方式也总结一下:
1.window.open('url','_self');
2.window.location.href=url;
3.<a href="url"></a>
4.location.assign("url");
对于第一种的跳转,open(‘url’,’_self’);对于有没有iframe的情况都一样,都是改变当前页面的地址。但是若target改为_blank,或是确切的窗口的名字的话,就是改变浏览器窗口的地址了。
父子页面的交流
这个就是针对有iframe 的页面来说的了。分为父子交流元素,和父子分享函数两个方面;
1.父子交流元素。
(1)父窗口获取iframe中元素(子页面的元素)(原生的方法)
总结为两步:
step1:找到iframe的窗口(两种方法):
1.window.frames[‘iframeName’],2.document.getElementById(‘iframe’).contentWindow;
step2:在上一步的基础上查找(与普通的查找一样)
document.getElementById();
window.frames['ifram的Name'].document.getElementById();或
document.getElementById('iframe').contentWindow.document.getElementById();
(2)父窗口获取iframe中元素(子页面的元素)(jQuery的方法)
总结为两步:
step1:找到iframe的元素:
1.$(“iframe的Id”).contents()
step2:在上一步的基础上查找(与普通的查找一样)
.find();
$("iframe的id").contents().find();或
$('iframe的Id','document.frames('frame的Name').document')
(3)子页面获取父窗口的元素(js的方法)
总结为两步:
step1:step1:找到父亲的窗口:
1.window.parent();(再次验证window是当前页面);
step2:在上一步的基础上查找(与普通的查找一样)
document.getElementById();
window.parent().document.getElementById();
(4)子页面获取父窗口的元素(jQuery的方法)
$("fu_id",parent.document);
1.父子分享方法。
(1)父窗口获取iframe中方法(子页面的元素)(原生的方法)
iframeName.window.functionName();
(2)子页面获取父亲的方法
parent.functioName();
ps:这是我的第一篇博客,这是一个开始,希望能够坚持下去,和大家一起成长,如果写的不好希望联系我。