A页面代码如下:

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A/title>
    <script>
        function openwindow(){
            window.open("A.html","","width=400,height=200,scrollbars=yes,resizable=yes,location=no");
        }
    </script>
</head>
<body>
        <input type="text" id="school">
        <input type="button" value="选择" onclick="openwindow()">
</body>
</html>

B页面代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B</title>
    <script>
        function choose(obj){
            var parent = window.opener.document.getElementById("school");
            parent.value=obj.innerHTML;
            self.close();
            window.opener.focus();
        }
    </script>
</head>
<body>
    <table>
        <tr>
            <td><a href="#" onclick="choose(this)">学校1</a></td>
        </tr>
        <tr>
            <td><a href="#" onclick="choose(this)">学校2</a></td>
        </tr>
        <tr>
            <td><a href="#" onclick="choose(this)">学校3</a></td>
        </tr>
    </table>
</body>
</html>

功能

当点击A页面选择按钮会弹出子窗口B页面,在B页面中选择内容并填入A页面中的选择框。

但是会出现一长串的报错:

Uncaught DOMException: Permission denied to access property "document" on cross-origin object(访问跨源对象上的属性“document”的权限被拒绝)

原因是因为js安全机制原则上是不能访问本地文件的,并且谷歌浏览器的安全设置级别比较高,认定你在"本地"应用opener属性的时候是通过js打开本地文件,所以操作被截止.

解决方法

谷歌浏览器快捷方式(右键)—属性—目标末尾加入

--enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files

注意chrome.exe后面一定要加空格,如下图:

以后都以这个修改过的快捷方式启动,就能够加载本地资源了。

最后修改:2020 年 10 月 28 日 12 : 00 AM
如果觉得我的文章对你有用,请随意赞赏