`
ynp
  • 浏览: 439505 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js权威指南读书笔记2

阅读更多
==========
1、客户端javscript中 全局对象时window
var a="nihao";
window.b = "nihao!";//等同于上一句
console.log(window.a);
console.log(a);
console.log(window.b);//nihao!
console.log(b);//nihao!
2、同源策略
当一个web页面使用多个帧(包括<iframe>标记)或者打开其他浏览器窗口,这一策略发挥作用。
3、帧之间访问
包括 父子帧之间、兄弟帧之间
书上P295 图14-3 很好体现的帧之间的关系

--》父帧
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>iframe测试程序</title>
<script type="text/javascript" >
//父帧的方法
function test(){
console.log("parent中的方法!")
}
//调用子帧的方法(两种方式)
function callChildIframe(){
//frames[0].iframeTest();
parent.iframe1.iframeTest();//必须加parent,且iframe标签必须用name 不能用id
}

</script>
</head>
<body>
<iframe name="iframe1" src="iframe.html"  width="100%" height="90%"></iframe>
<iframe name="iframe2" src="iframe2.html"  width="100%" height="90%"></iframe>
<input type="button" id="mb1" value="调用子帧的方法" onclick="callChildIframe()"/>
</body>
</html>

--》子帧1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" type="text/javascript">
   //子帧的方法
function iframeTest(){
console.log("子帧的方法!");
}
   //调用父帧中的方法(三种方式)
function callParentTest(){
//parent.test();
//top.test();//不管帧有多少层次直接跳到顶层
var parentTest = top.test;
parentTest();
}

   //调用兄弟帧中的方法(两种方式)
function callbratherTest(){
//parent.frames[1].iframe2Test();
parent.iframe2.iframe2Test();
}
</script>
</head>
<body">
<input type="button" id="mb2" value="调用父帧中的test方法" onclick="callParentTest()" /> <br>
<input type="button" id="mb2" value="调用兄弟帧中的test方法" onclick="callbratherTest()" /> <br>
</body>
</html>


--》子帧2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" type="text/javascript">
//子帧的方法
function iframe2Test(){
console.log("子帧2的方法!!");
}

</script>
</head>
<body">
</body>
</html>
分享到:
评论

相关推荐

    js权威指南读书笔记.docx

    js权威指南读书笔记.docx

    js权威指南读书笔记.pdf

    js权威指南读书笔记.pdf

    JavaScript 权威指南(第四版) 读书笔记

    Javascript是无类型、解释型语言 对大小写敏感 html对大小写不敏感 忽略空格符、制表符、换行符(关键字、变量、正则表达式 除外) “;”分号可选择 //单行注释 /*多行注释*/ 标示符 开头必须是字母、下划线、$符号 ...

    笔记:读书笔记,读书笔记

    :open_book: 读书笔记 :slightly_smiling_face: :upside-down_face: 买过很多书,也打印过很多电子版的书籍和资料,断断续续的读,杂乱无章。心血来潮,想自己整理一下,希望可以坚持下去,不断学习,不断提升自己。...

    ng2-in-action:《 Angular权威指南》读书笔记-官方源码https

    生活所迫,又沦为全干工程师。 应付应付工作就行了,关于js可以或者Ng原理就不深扣了。

    Reading-Notes:读书笔记们

    学习笔记都在这里了 好好学习,天天向上!生命不息,阅读不止!...HTTP权威指南 Head First Java CSS3揭秘 Linux Command Line 大型网站技术架构核心原理与案例分析 锋利的jQuery JavaScript设计模式与开发实践

    Jquery 学习帮助文档

    《jQuery权威指南》是一本深入解析jQuery的书籍,其读书笔记为我们提供了理解jQuery核心概念和实用技巧的宝贵资源。 ### 1. jQuery基础 - **选择器**: jQuery的选择器基于CSS,可以方便地选取DOM元素,如`$("#id")...

    玩转html5的canvas画图

    ,最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。温馨提示:以下所有实验请使用最新版的operacontext:一直觉得这个翻译成“上下文”真够蛋疼的,context是一个封装了很多...

Global site tag (gtag.js) - Google Analytics