Question

我有一些代码，我在新窗口中显示来自html，xml或txt文件的内容。我有一个问题，其中getElementById有时返回null。它通常似乎适用于Chrome，但IE8尤其是Firefox非常不稳定。

更具体地说，一旦我尝试显示txt文件，它就无法工作。

我已经尝试添加（在我的情况下）newWindow.onload = function（）{... 和$（newWindow.document）.ready（function（）{... 虽然，因为我是javascript和php的新手，我可能做错了。

以下是相关代码：

使用Javascript：

function newWindow(pathname, type){

    var newWindow = window.open("newWindow.php");

    $.ajax({
            type: "post",
            url: "windowHelper.php",
            data: {pathname: pathname, type: type},
            dataType: "json"
    })
    .done(function(data, textStatus, jqXHR){  //tried to add the .onload and .ready here

            newWindow.document.getElementById("newWindow").innerHTML = data.data1;

     })
    .fail(function(jqXHR, textStatus, errorThrown){

            newWindow.document.getElementById("newWindow").innerHTML = textStatus + errorThrown;
    });
}

PHP：

        if(isset($_POST["pathname"]) && !empty($_POST["pathname"]) && isset($_POST["type"]) && !empty($_POST["type"])){

            $pathname = $_POST["pathname"];
            $type = $_POST["type"];
            $filename = str_replace("/var/tmp/ciscat/", "", $pathname);

                    if($type == 'html'){
                            $contentString = str_replace("<html>", "", file_get_contents($pathname));
                            $contentString = str_replace("</html>", "", file_get_contents($pathname));
                            $contentString = str_replace("<body>", "", file_get_contents($pathname));
                            $contentString = str_replace("</body>", "", file_get_contents($pathname));
                            }
                    else if($type == 'xml'){

                            $contentString = htmlspecialchars(file_get_contents($pathname), ENT_QUOTES);
                    }
                    else if($type == 'txt'){
                            $contentString = str_replace("\n", "<br/ >", file_get_contents($pathname));
                    }
                    else{
                            $contentString = "Blir feeeeel!!";
                    }

            $reportContent = "<p class = 'normalText'>Content of the file: $filename. Download the file in order to utilise the full content. </p> $contentString";
            print json_encode(array( "data1" => $reportContent));
    }

HTML：

<!DOCTYPE html>

<html>
<head>

<SCRIPT type="javascript/text" src="functions.js"></SCRIPT>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<div id = "newWindow">
</div>

</body>
</html>

有没有人有任何我可以尝试的额外想法？任何帮助将非常感激！：）

我怀疑这里可能会有一些“坏”代码，有些评论也很不错，但我的主要问题是evul getElementById。

提前谢谢

Answer 1

[编辑]

我想你可以尝试这样包装$.ajax()（虽然^ _ ^仍然应该首先添加jQuery）：

$.ajax({
    type: "post",
    url: "windowHelper.php",
    data: {pathname: pathname, type: type},
    dataType: "json",
    success: function(data, textStatus, jqXHR) {
        newWindow.document.getElementById("newWindow").innerHTML = data.data1;
    },
    error: function(data, textStatus, errorThrown) {
        newWindow.document.getElementById("newWindow").innerHTML = textStatus + errorThrown;
    }
})

Answer 2

首先添加jQuery，

而不是

 newWindow.document.getElementById("newWindow").innerHTML = data.data1;

你能用这个吗

 $("#newWindow").html(data.data1);

希望这会有所帮助。

Answer 3

好吧，因为我无法获得其他任何工作，包括.onload和.ready（这两个打破了其他事情）我决定对我的问题做一些“丑陋”修复。

标签，例如newWindow没有时间在我的Javascript之前加载，因此getElementById（“”newWindow）返回null，因为ID尚不存在。

我所做的是添加一个等待0.5秒的计时器，然后发布到新窗口，确保它有时间加载。这是有效的，但它不是一个好的答案，因为它可能会失败，有时新窗口加载非常缓慢（我怀疑）。但是，它确实有效，而且缺乏更好的选择，这就是我要做的。

除了计时器，我还改变了HTML文档中我的标签的顺序，并更改了变量名称，以确保没有两个名称相同。这些并没有解决我的问题，但这是很好的实践。

新的JS代码：

function openNewWindow(pathname, type){
    /*newWindow has to be defined here*/
    var popWindow = window.open("newWindow.php");


    $.ajax({
            type: "post",
            url: "windowHelper.php",
            data: {pathname: pathname, type: type},
            dataType: "json"
    })
    .done(function(data, textStatus, jqXHR){

            setTimeout(function() {

            popWindow.document.getElementById("newWindowDiv").innerHTML = data.data1;

            }, 500);
     })
    .fail(function(jqXHR, textStatus, errorThrown){

            setTimeout(function() {

            popWindow.document.getElementById("newWindowDiv").innerHTML = textStatus + errorThrown;

            }, 500);

});
}

getElementById有时为null。已经尝试过.onload和.ready

3 个答案: