全局变量在新的弹出窗口中是未定义的，而它们是预先定义的

Global variables are undefined in new pop up window, while they were defined beforehand

本文关键字：定义 未定义 窗口 全局变量      更新时间：2023-09-26

我尝试创建两个按钮，这样当我点击每个按钮时，我将得到一个弹出的小窗口，其中包含它将在加载时获得的内容。
这是代码:

index . html : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="script.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p ng-controller="ctrl">
    <span ng-repeat="x in items">
        <button ng-click="parentFunc(x.fieldOne,x.fieldTwo)">{{x.fieldOne}}</button>
        <br><br>
    </span>                 
</p>
<script>items();</script>
</body>
</html>

script.js : 

var title, content;
function items(){
    angular.module('myApp', []).controller('ctrl', function($scope) {
    $scope.items = [
        {fieldOne:"field1", fieldTwo:"field1 content"},
        {fieldOne:"field2", fieldTwo:"field2 content"}
        ];
    $scope.parentFunc=function(titleTmp,contentTmp){
        title=titleTmp;
        content=contentTmp;
        var OpenWindow = window.open('popUp.html','_blank','width=500, height=400');
        return false;
    }
    });
}
function codeAddress() {
    document.getElementById("title").innerHTML=title;
    document.getElementById("content").innerHTML=content;
}

popUp.html : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="script.js"></script>
</head>
<body onload="codeAddress();">
<h1 id="title"></h1>
<div id="content"></div>
</body>
</html>

新的弹出窗口按预期打开，但其中的h1和div得到undefined。我试着调试它，我看到parentFunc的前两行执行后，全局变量title和content得到我所期望的，它们不是未定义的。然而，当执行第三行并打开新窗口时，全局变量是未定义的。

为什么两个全局变量在弹出窗口中未定义?
怎么解呢?

您的方法不起作用:您正在尝试重新加载script.js，然后，变量被重新初始化。

在URL中添加变量:

var OpenWindow = window.open('popUp.html?title='+titleTmp+'&content='+contentTmp,'_blank','width=500, height=400');

然后，在你的第二页，读这些参数:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript">
    function codeAddress(){
     var title  = GET_TITLE_FROM_PARAMETER;
     var content = GET_CONTENT_FROM_PARAMETER;
     document.getElementById("title").innerHTML=title;
     document.getElementById("content").innerHTML=content;
    }
    </script>
</head>
<body onload="codeAddress();">
<h1 id="title"></h1>
<div id="content"></div>
</body>
</html>

当然，从第一页删除codeAddress，因为它是无用的。

仅供参考，要获取参数值，请检查此答案

相关文章：