热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

javascript父、子页面交互技巧总结

存放子页面可以是iframe,又可以是frameset,本例介绍javascript父、子页面交互技巧,需要的朋友可以参考下

帧用来存放子页面,既可以是iframe,又可以是frameset。window对象是全局对象,页面上的一切函数和对象都在它的作用域里。
1、parent代表父窗口、如果父窗口又存在若干层嵌套,则top代表顶级父窗口。
self代表窗口自身。

if(self==top){//}判断窗口是否处于顶级 
if(self==parent){}//也可以

2.1、父页面访问子页面元素。思路是子页面的元素都在其window.document对象里面,先获取它然后就好说了。
帧最好设置name属性,这样操作最方便。如


假如要获取child.html里面id为'menu'的元素,则可以这样写:

window.frames["test"].document.getElementById('menu'); 
//由于所有的函数都存放在window对象里面,可去掉开头的window: 
frames["test"].document.getElementById('menu'); 
//在浏览器中,帧的name属性被默认等同于子页面的window对象,因此可以进一步简写: 
test.document.getElementById('menu');

2.2 父页面访问子页面函数或对象。子页面的函数和对象都在其window对象里,同上,关键是获取该对象。

//假如child.html定义了showMesg函数,需要在父中调用,则这样写 
window.frames['test'].showMesg(); 
//简写形式 
test.showMesg(); 
//同理,对象也是如此访问 
alert(test.person);

2.3 其他获取document的方式。
先使用'document.getElementById()'或'document.getElementsByTagName()'把帧作为document下的Element获取,然后访问其属性contentDocument/contentWindow (iframe、frame特有),其中第一个ie7-不支持,第二个chrome不支持.

 
//====== 
var doc=document.getElementById('testId'); 
//或者 
var doc=document.getElementsByTagName('iframe')[0]; 
然后 
var winOrdoc=doc.contentDocument||doc.contentWindow;//二选一 
if(winOrdoc.document)winOrdoc=winOrdoc.document; 
winOrdoc.getElementById('menu'); 
//如果需要window对象,则这样写: 
if(winOrdoc.defaultView)winOrdoc=winOrdoc.defaultView;

3.1子页面访问父页面元素。思路同2.1,先获取父窗口window.document对象

parent.window.document.getElementById('parentMenu'); 
//简写 
parent.document.getElementById('parentMenu');

3.2,子页面访问父页面函数或对象。思路同2.2,先获取父窗口window对象。

parent.parentFunction();

最后提一下js的同源策略,即位于A网站的js代码不允许访问位于B网站的内容,即使该代码来源于B网站。假如帧是其它网站的页面,那么按上述方法互相访问时,浏览器应该会提示:'没有权限'错误。


推荐阅读
  • 本文介绍了如何使用Python爬取妙笔阁小说网仙侠系列中所有小说的信息,并将其保存为TXT和CSV格式。主要内容包括如何构造请求头以避免被网站封禁,以及如何利用XPath解析HTML并提取所需信息。 ... [详细]
  • 本文详细探讨了使用Python3编写爬虫时如何应对网站的反爬虫机制,通过实例讲解了如何模拟浏览器访问,帮助读者更好地理解和应用相关技术。 ... [详细]
  • Cookie学习小结
    Cookie学习小结 ... [详细]
  • 近期,微信公众平台上的HTML5游戏引起了广泛讨论,预示着HTML5游戏将迎来新的发展机遇。磊友科技的赵霏,作为一名HTML5技术的倡导者,分享了他在微信平台上开发HTML5游戏的经验和见解。 ... [详细]
  • 用阿里云的免费 SSL 证书让网站从 HTTP 换成 HTTPS
    HTTP协议是不加密传输数据的,也就是用户跟你的网站之间传递数据有可能在途中被截获,破解传递的真实内容,所以使用不加密的HTTP的网站是不 ... [详细]
  • 深入解析HTML5字符集属性:charset与defaultCharset
    本文将详细介绍HTML5中新增的字符集属性charset和defaultCharset,帮助开发者更好地理解和应用这些属性,以确保网页在不同环境下的正确显示。 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 浏览器作为我们日常不可或缺的软件工具,其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程,帮助读者更好地理解这一关键技术组件,揭示其内部运作的奥秘。 ... [详细]
  • DVWA学习笔记系列:深入理解CSRF攻击机制
    DVWA学习笔记系列:深入理解CSRF攻击机制 ... [详细]
  • Webdriver中元素定位的多种技术与策略
    在Webdriver中,元素定位是自动化测试的关键环节。本文详细介绍了8种常用的元素定位技术与策略,包括ID、名称、标签名、类名、链接文本、部分链接文本、XPath和CSS选择器。每种方法都有其独特的优势和适用场景,通过合理选择和组合使用,可以显著提高测试脚本的稳定性和效率。此外,文章还探讨了在复杂页面结构中如何灵活运用这些定位技术,以应对各种挑战。 ... [详细]
  • 在Eclipse中提升开发效率,推荐使用Google V8插件以增强Node.js的调试体验。安装方法有两种:一是通过Eclipse Marketplace搜索并安装;二是通过“Help”菜单中的“Install New Software”,在名称栏输入“googleV8”。此插件能够显著改善调试过程中的性能和响应速度,提高开发者的生产力。 ... [详细]
  • Win10 S系统与Chrome浏览器兼容性问题分析
    2017年5月2日,微软在美国推出了最新的Windows 10 S操作系统,专为教育领域设计,旨在为教师和学生提供一系列高效的产品和服务。该系统的最大特点是其简洁的设计和快速的响应速度,然而在与某些应用的兼容性方面,特别是Chrome浏览器,仍存在一些问题。本文将深入分析这些兼容性问题,并探讨可能的解决方案。 ... [详细]
  • 在PHP中实现腾讯云接口签名,以完成人脸核身功能的对接与签名配置时,需要注意将文档中的POST请求改为GET请求。具体步骤包括:使用你的`secretKey`生成签名字符串`$srcStr`,格式为`GET faceid.tencentcloudapi.com?`,确保参数正确拼接,避免因请求方法错误导致的签名问题。此外,还需关注API的其他参数要求,确保请求的完整性和安全性。 ... [详细]
  • 精选在线API编辑工具推荐
    本文将介绍几款优秀的在线API编辑工具,包括它们的功能特点和使用方法,帮助开发者提高工作效率。 ... [详细]
  • 利用爬虫技术抓取数据,结合Fiddler与Postman在Chrome中的应用优化提交流程
    本文探讨了如何利用爬虫技术抓取目标网站的数据,并结合Fiddler和Postman工具在Chrome浏览器中的应用,优化数据提交流程。通过详细的抓包分析和模拟提交,有效提升了数据抓取的效率和准确性。此外,文章还介绍了如何使用这些工具进行调试和优化,为开发者提供了实用的操作指南。 ... [详细]
author-avatar
ub皓祉
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有