js小练习（四）：关于弹窗的父子页面传值问题

（一）核心思想：

主要是关于window.open（）和window.close（）的简单运用，涉及到了父子页面传值的问题。

需要注意的是如果是在本地浏览器，用file：///页面打开的话，选择城市之后按F12会看到报错：Uncaught DOMException: Blocked a frame with origin “null” from accessing a cross-origin frame.

因为跨页面涉及到了域的概念，传值会失败，window.close（）也不出效果。建议是在本地架一个服务器。我用node.js搭了一个服务器，就不再报这个错误了。

（二）关键代码：

（1）主html页面：

 <div>  
    请选择城市:<input type="text" name="city" id="city" readonly>
    <input type="button" onclick="Open()" value="选择">
</div>

(2) 主页面js：

function Open(){ 
window.open("suceess.html","广告页",
"width=300,height=100,scollbars=yes,resizeble=yes");
//测试了一下，这里的样式里如果长宽带了单位，则样式效果失效，scollbars设置滑动条，resizeble设置窗口是否可以拉伸缩小。

} 

（3）跳转弹窗页面html：

<select id="subCity" name="subCity" onchange="seclectCity(this.value)">
    <option value="无">-----请选择城市=-----</option>
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="成都">成都</option>
</select>

（3）跳转页面js：

function seclectCity(vlu){ 
opener.document.getElementById("city").value =vlu;//子界面向父界面传值
window.close();
}

（三）运行结果：