Javascript

测试框架

框架集--------frameset

内嵌框架--------iframe

外面是一个包装器container，浮动在左边的是超链接列表list，浮动在右边的是wrapper，里面有个iframe（将其他网站的网页集成到一个网页上）；

监听每一个超链接的click事件；

查询id为list的所有的后代a元素赋给links；

给links遍历，给link加一个监听器addEventListener；

⚠用超链接来做，一定要阻止超链接的默认行为；event.preventDefault( );

把当前的超链接设成iframe的src属性；

方法二：

每一个自定义属性data-，放在dataset里面；

给每一个span元素加一个data-address；

id为list所有的后代元素span；

修改iframe的src，通过event.target.dataset.address，也可以写成link.dataset.address；

iframe里面的内嵌模式打开设置为on；//iframe.document.designMode='on';让用户可以修改

数据传递

父页面向子页面传送数据,在子页面上调用postmessage（）方法

一旦用户点击按钮，父页面触发postmessage事件，可以把传输的数据作为参数发送到子页面，子页面在window上面监听message事件，文本在event.data属性里

<output></output>//呈现输出结果,行内元素，默认高度是0

json配置文件

javascript对象

对象的属性

字段属性：

id

name

gender

方法属性：

sing（）//新写法不需要function

老写法是“方法名：匿名函数”

this代表对象本身

转换通常说成序列化，方法是不能被序列化的,反序列化方法丢失

JSON.stringify(stu);//javascript对象➡ ️json字符串

JSON.parse(stu_json);//javascript对象⬅ ️json字符串

对象是可以迭代的；先迭代键，有了键可以迭代值；

alert(event.source.document.body.outerHTML)

父子关系

发送数据postmessage；收到数据用message

子窗体得到父窗体body里面的数据，event.source也可以写成window.parent

子窗体收到信息之后即使向父窗体发送数据（可以在任意事件发送）;

子窗体也可以向父窗体发送数据;

打开的按钮，调用window.open一定打开新窗口，新窗口需要加在的地址url，给新窗口的名字name，新窗口的尺寸[第三个参数也可以屏蔽地址栏最大化按钮]）通过调用close（）方法可以关闭，新窗口是一个子页面

window.parent|window.opener|window.opener.document.body.innerHTML

new_win要放在外面,在关闭，打开，向新窗体发送数据时调用new_win;

new_win.addEventListener('message',event =>alert(event.data));必须写在open_btn.addEventListener("click", () => {的里面；

平级BOM

同一个窗口打开，通过window.name共享数据，窗体如果没有设置name属性，‘ ’空字符串

数据比较复杂，widow.name设置为JSON字符串

用get方法是将查询字符串附在url后面，多个键值对用and隔开，？问号后面的是查询字符串

window.location调用查询字符串