window对象name属性示例

 描述：

• window.name是window对象的一个属性，默认值为空
• window.name值在不同页面(甚至不同域名)加载后依旧存在，并且可以支持非常长的name值(2MB左右),页面在切换之后，甚至域名更改之后仍然会存储信息的容器
• 正是由于window.name属性拥有在不同页面保持存在的特性，因此出现了一门叫做【跨域传输】的技巧，而这个技巧的内部实现原理就是window.name的持久性的特性
• 想要获取一个页面内的信息，那么必须先加载

---

了解一下iframe：

通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了。

 <iframe src="demo_iframe_sandbox.htm"></iframe>

描述：一个内联框架，用来在当前 HTML 页面中嵌入另一个文档，所有主流浏览器都支持iframe标签

a.iframe常用属性:

• frameborder:是否显示边框，1(yes),0(no)
• height:框架作为一个普通元素的高度，建议在使用css设置。
• width:框架作为一个普通元素的宽度，建议使用css设置。
• name:框架的名称，window.frames[name]时专用的属性。
• scrolling:框架的是否滚动。yes,no,auto。
• src：内框架的地址，可以使页面地址，也可以是图片的地址。
• srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
• sandbox: 对iframe进行一些列限制，IE10+支持

---

示例：

page.html

<script>
        //page.html的
        var num = 10;
        window.name = 'var num=[1,2,3];';
</script>

test.html

<button>跨域传输</button>

test.js

<script>
        // 获取元素
        const btn = document.querySelector("button");

        btn.onclick = () => {
            const iframe = document.createElement("iframe");
            iframe.src = "./page.html"; //加载保存信息的页面
            iframe.style.display = "none";
            document.body.appendChild(iframe);

            //当 iframe 加载完毕，意味着 window.name 的内容已经加载完毕
            iframe.onload = (eve) => {
                const iframeWindowName = eve.target.contentWindow.name;
                // console.log(iframeWindowName);

                /*将字符串解析成代码
                计算某个字符串,并执行其中的的 JavaScript 代码
                返回通过计算 string 得到的值（如果有的话，无值返回undefined）。只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回
                如果参数中没有合法的表达式和语句，则抛出 SyntaxError 异常。
                如果非法调用 eval()，则抛出 EvalError 异常。
                如果传递给 eval() 的 Javascript 代码生成了一个异常，eval() 将把该异常传递给调用者
                */
                eval(iframeWindowName);
                console.log(num);
            }
        }
</script>