js点击一组信息无法填入表格

img

功能描述：点击选择跳出新页面，有两组信息可选：两个学生的学号和姓名，点击一组信息后自动填入表格

主要问题：点击一组信息无法填入表格

主页面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    <body>
        <!--编写第一个页面，之中有个按钮实现跳转-->
        编号：<input type="text" id="id1" value=""><br/>
        姓名：<input type="text" id="id2" value=""><br/>
        <!--按钮实现跳转-->
        <input type="button" value="点击选择" onclick="SelectInput()">
    
    <script language="javascript">
        function SelectInput() {
            //<!--实现跳转功能,xuanze.html为要跳转的的页面并设置其宽和高-->
            window.open("xuanze.html", "", "width=300px,height=200px");
        }
    </script>

    </body>

</html>

弹窗页面：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <input type="button" value="选择" onclick="dome1('0010','小米');">
        <font>0010</font>&nbsp&nbsp&nbsp
        <font>小米</font>
        <br>
        <hr>

        <input type="button" value="选择" onclick="dome1('0012','小含');">
        <font>0012</font>&nbsp&nbsp&nbsp
        <font>小含</font>
    </body>
    <script>
        function dome1(num1, nam1) {
            //<!--window的opener属性是获取创建这个页面的页面，-->
            var fuYueMian = window.opener;
            var p1 = fuYueMian.document.getElementById("id1");
            p1.value = num1;
            var p2 = fuYueMian.document.getElementById("id2");
            p2.value = nam1;
            window.close();
        }
    </script>    
    </body>

</html>

有跨域问题，不能直接用页面打开，需要放到网站下打开。也就是不能用file://，要用http://localhost之类的。

用弹窗不就可以了吗，为啥要跳页面