今天工作的时候遇到一个问题。业务反应，他们用的某个功能的弹窗，除了IE，都不能用了……
研究了一下，发现新版本的chrome已经禁用了这个方法。百度了一圈之后，找到了新的替代方案，顺便记录一下。
window.open
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
window.open(URL,name,features,replace);
URL
一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name
一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features
一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。
replace
一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值:
true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。
dialogArguments的替代方法
我们的项目中需要在打开窗口的时候向子窗口传递一些参数。
通过url直接传递固然很好，但是有些事需要在js端处理的参数就不太方便了，然而还没有dialogArguments
这个方法可以用。上网查了一下，其实是用window.open打开的窗口没有必要把参数传递到子窗口，而是子窗口可以直接获得父窗口的参数:
window.opener.document.getElementById('p').innerText = 'TextValue';
父窗口的方法回调
我们原来的功能有一个有趣的地方就是，window.showModalDialog()这个方法是有返回值得。而且我们原来的代码会根据返回值的不同来调用一下别的方法。于是就产生了新的问题……
首先我们这个东西是不会有返回值的，至少我试了下return回来的只是个对象，没发现啥。
返回值可以用操作符窗口的dom元素来解决，但是我们如何调用父窗口方法，这个玩艺是个异步的……
我想出的方法是，在父页面的body下添加一个新的隐藏元素，并且在这个元素下增加方法，而且用这个元素还给传值提供方便了。
// 父页面
function openChild() {
var test = Math.random();
// 创建一个隐藏元素
var fatherHidden = document.createElement("input");
fatherHidden.type = 'hidden';
fatherHidden.id = "fatherData";
fatherHidden.init = function() {
alert('I`m a function！' + test);
}
document.body.appendChild(fatherHidden);
document.getElementById('fatherData').value = fatherData;
var returnValue = window.open('./foo2.html');
}
// 子页面
function closeChild() {
alert(window.opener.document.getElementById('fatherData').value);
window.opener.document.getElementById('p').innerText = window.opener.document.getElementById('fatherData').value;
window.opener.document.getElementById('fatherData').init();
// 用完了吧隐藏元素删了
window.opener.document.body.removeChild(window.opener.document.getElementById('fatherData'));
window.close();
}
然而事实上，我们可以很直接调用父页面的方法…… 这样写麻烦了。
// 父页面
function openChild() {
var returnValue = window.open('./foo2.html');
}
// 回调方法
function fatherCallback(msg) {
alert(msg + 'callback');
}
// 子页面
function closeChild() {
window.opener.fatherCallback('I`m back!');
window.close();
}
嗯，之前自己好蠢啊，好气啊~
留言