Question

我尝试创建两个按钮，这样当我点击每个按钮时，我会弹出一个小窗口，其内容会在上传时显示。
这是代码：

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得到了我所期望的并且它们未被定义。但是，当执行第三行并打开新窗口时，全局变量未定义。

为什么在弹出窗口中未定义两个全局变量？
我该如何解决这个问题？

Answer 1

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

在网址中添加你的变种：

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，因为它没用。

仅供参考，要获取参数值，请查看this answer。

新弹出窗口中未定义全局变量，而事先已定义它们

1 个答案: