Question

在HTML中我试图将javascript对象变量从一个页面传递到另一个页面，我尝试了一些方法，例如内部存储和使用页面处理程序设置值，但它们都没有工作。我的代码如下：第1页：

<!doctype html>

<html>
    <head>
        <script>
            function putRangeValue() {
                pain_value.value = pain_range.value;
            }

            var empData;
            function saveData() {
                empData = new Object();

                empData.name = emp_name.value;
                empData.contact = emp_telephone.value;
                empData.address = emp_address.value;
                empData.dob = emp_dob.value;
                empData.reason_visit = visit_reason.value;
                empData.pain_range = pain_range.value;
                empData.preferred_time = preferred_time.value;
                empData.preferred_date = preferred_date.value;


                document.write(empData.name+" "+empData.contact+" ");
                document.write(empData.address+" "+empData.dob+" ");
                document.write(empData.reason_visit+" "+empData.pain_range+" ");
                document.write(empData.preferred_time+" "+empData.preferred_date);


                var new_window = window.open("page2.html");

                /*var new_window = window.open("page2.html");
                new_window.emp=empData.value;*/

            }
        </script>
    </head>
    <body>
        <fieldset>
            <legend>
                Personal Details:
            </legend>
            Name:<br>
            <input type="text" id="emp_name" value="john"><br>
            Telephone number:<br>
            <input type="tel" id="emp_telephone" value="87473257"><br>
            E-mail address:<br>
            <input type="text" id="emp_address" value="john@someid.com"><br>
            Date of birth:<br>
            <input type="date" id="emp_dob"  value="24-04-2017"><br>
        </fieldset>
        <fieldset>
            <legend>
                Appointment Request:
            </legend>
            What is the reason for your visit?<br>
            <input type="text" id="visit_reason"  value="sick"><br>
            Current pain level<br>
            <input type="range" min="0" max="10" id="pain_range" value="0" onchange="putRangeValue()">
            &nbsp;
            <input type="text" size="1" id="pain_value" value="0"><br>
            Preffered date:<br>
            <input type="date" id="preferred_date" value="25-04-2017"><br>
            Preferred time:<br>
            <input type="time" id="preferred_time" value="23:03"><br>
        </fieldset>
        <br>
        <button onclick="saveData()">Submit</button>
    </body>
</html>

2页：

<!doctype html>

<html>
    <head>
        <title>

        </title>
        <script>
            function displayData() {
                var emp = window.opener.empData;

                document.write(emp.name+" "+emp.contact+" ");
                document.write(emp.address+" "+emp.dob+" ");
                document.write(emp.reason_visit+" "+emp.pain_range+" ");
                document.write(emp.preferred_time+" "+emp.preferred_date);
            }
        </script>
    </head>
    <body>

        <script>
            displayData();
        </script>
    </body>
</html>

我也尝试了here提到的内容，但我总是得到错误

Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
    at displayData (file:///E:/page2.html:13:28)
    at file:///E:/file:///E:/page2.html:25:4

即使我没有使用任何框架。

Answer 1

启动chrome或chromium并设置--allow-file-access-from-files标志，以便能够从file:协议访问本地fielsystem中的文件。请参阅Read local XML with JS。

将javascript对象变量从一个HTML页面传递到另一个HTML页面

1 个答案: