Question

test2.html

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
form {
    width: 330px;
    margin: 20px;
    background-color: pink;
    Padding: 20px;
}

input {
    text-align: right;
}
</style>

<script type="text/javascript">
    var pw;
    function create_form(_name, _action, _method, _target) {

        var instance = document.createElement("form");
        instance.name = _name;
        instance.action = _action;
        instance.method = _method;
        instance.target = _target;

        return instance;
    }

    function create_input_to_form(_form, _type, _name, _value) {
        var form_instance = _form;
        var input_instance = document.createElement("input");

        input_instance.type = _type;
        input_instance.name = _name;
        input_instance.value = _value;

        form_instance.insertBefore(input_instance, null);

        return form_instance;
    }

    function insert_form_to_html(_form) {
        document.body.insertBefore(_form, null);
    }

    function init() {

        var instance = create_form(
                "nuForm",
                "Test3.html",
                "post", "postWindow");
        insert_form_to_html(instance);
        pw = window.open("", "postWindow", "width=300, height=400");
        instance.submit();

        if (pw == null) {
            alert("error;");
        }
        else {
            pw.document.onload = function() {
                alert("wow");
            }
            document.write("1");
            pw.onload = function() {
                alert("wow2");
            }
            document.write("2");
            setTimeout(function(){
                alert("wow3");
                alert(pw.document.title);
            }, 3000);
            document.write("3");
        }

    }
</script>
</head>

<body onLoad="init();">

</body>
</html>

test3.html

<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
</head>
<body>popup bodys
</body>
</html>

alert（“哇”）;, alert（“wow2”）;, alert（pw.document.title）;不起作用。文件位于同一文件夹中，创建弹出窗口时不会出现错误和警告。

我无法理解为什么pw不是局部变量但是只在Init（）函数中使用pw变量，并在超时中分解。

我在google chrome中测试它

有一个固定的test2.html代码。

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
form {
    width: 330px;
    margin: 20px;
    background-color: pink;
    Padding: 20px;
}

input {
    text-align: right;
}
</style>

<script type="text/javascript">





    var pw;
    function create_form(_name, _action, _method, _target) {

        var instance = document.createElement("form");
        instance.name = _name;
        instance.action = _action;
        instance.method = _method;
        instance.target = _target;

        return instance;
    }

    function create_input_to_form(_form, _type, _name, _value) {
        var form_instance = _form;
        var input_instance = document.createElement("input");

        input_instance.type = _type;
        input_instance.name = _name;
        input_instance.value = _value;

        form_instance.insertBefore(input_instance, null);

        return form_instance;
    }

    function insert_form_to_html(_form) {
        document.body.insertBefore(_form, null);
    }

    function init() {
        var instance = create_form("nuForm", "Test3.html", "post", "postWindow");
        insert_form_to_html(instance);
        pw = window.open("", "postWindow", "width=300, height=400");
        instance.submit();

        if (pw == null) {
            alert("error;");
        } else {


            pw.onload = function() {
                alert("wow2");
                console.log("4");
            }
            console.log("2");
            console.log(pw);
            setTimeout(function() {
                if (pw==null) {
                    alert("pw is null");
                }
                else {
                    //console.log(document.domain);
                    console.log(pw);
                    //alert(pw.title);
                }

            }, 3000);
            console.log("3");
        }

    }
</script>
</head>

<body onLoad="init();">

</body>
</html>

第一个问题是“警告（”wow2“）;”和“console.log（”4“）;”当弹出窗口完成加载时，代码不会执行。

第二个问题是“console.log（pw）;”进入setTimeout（）输出空值，但另一个“console.log（pw）”输出右侧弹出窗口。虽然pw不是局部变量，为什么pw变量会消失？

执行此文件时有谷歌Chrome控制台

2 Test2.html:69
'window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead. VM56:423
Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
 Test2.html:70
3 Test2.html:82
Window {}

Answer 1

当你的脚本来到这个部分时......

        pw.document.onload = function() {
            alert("wow");
        }
        document.write("1");
        pw.onload = function() {
            alert("wow2");
        }
        document.write("2");
        setTimeout(function(){
            alert("wow3");
            alert(pw.document.title);
        }, 3000);
        document.write("3");

...事件甚至可以设置，但您使用document.write()丢失了文档内容。所以一切都消失了。因此，您可以看到alert("error;");但您的代码中没有其他alert()。您应该使用console.log()来调试此类值。只需改变：

document.write("1");

为...

console.log("1");

或者如果你真的想将值打印到文档......

document.body.innerHTML = "1";

和其他事件发生。

Answer 2

您可以进行如下所示的init方法更改：

    if (pw == null) {
        alert("error;");
    }
    else {

        pw.onload = function() {
            alert("wow2");
        }
        console.log("2");
        setTimeout(function(){
            alert("wow3");
            alert(pw.title);
        }, 3000);
        console.log("3");
    }

将pw.document.onload替换为pw.onload。现在它正在运作

你可以在这个小提琴中找到。 http://jsfiddle.net/QU7nP/

javascript - onload函数和setTimeout不起作用（续订）

2 个答案: