Question

我尝试为我的网站创建一个更新列表，这样当我点击相关更新时，会打开一个新的额外的小html窗口，我会看到完整的更新内容。
这是我写的代码：

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="updatesCtrl">
    <span ng-repeat="x in updates">
        <a href="updateWindow.html" onclick="showUpdate(x.title,x.update)">&#9679; {{x.title}}</a>
        <br><br>
    </span>                 
</p>

<script>updates();</script>

</body>
</html>

script.js：

function updates(){
    angular.module('myApp', []).controller('updatesCtrl', function($scope) {
    $scope.updates = [
        {title:"update1",update:"update1 content"},
        {title:"update2",update:"update2 content"}
        ];
    });
}

function showUpdate(title, update){ 
    var win=window.open('updateWindow.html','newwindow','width=600, height=350'); 
    win.document.getElementById("title").innerHTML=title;
    win.document.getElementById("update").innerHTML=update;
    return false;
}

updateWindow.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>

<h1 id="title"></h1>
<p id="update"></p>

</body>
</html>

我在这里遇到的问题很少：
1.当我点击更新链接时，更新窗口取代了主页面（index.html）窗口，也是一个完整大小的页面。
2.在updateWindow的<h1>和<p>中没有进行任何更改 - 尽管我编写了一个脚本，假设要向这些地方输入html内容。

我不明白为什么我没有得到我对此代码的期望。特别是，我不明白第一个问题：如果我只尝试使用onclick替换index.html内的"window.open('updateWindow.html','newwindow','width=600, height=350'); return false;"内容 - 我会获得一个较小的新窗口预期（我不会在此窗口中获取更新内容，但至少可以解决我的第一个问题）。

我的代码有什么问题？

Answer 1

尝试使用window.open('updateWindow.html','_blank','width=600, height=350');代替

Answer 2

在您尝试更新html之前，我认为窗口未加载：你可以看到html页面还没有加载，开发工具说有Uncaught TypeError: Cannot set property 'innerHTML' of null尝试让新页面在更新页面中更新它onload。

window.open（）在JS函数

2 个答案: