[英]window.open() doesn't work correctly inside a JS function
I tried to create an updates list for my web, so that when I click on the relevant update- a new additional small html window will open and I will see the full update content. 我试图为我的网站创建一个更新列表,以便当我单击相关更新时,将打开一个新的附加小html窗口,我将看到完整的更新内容。
This is the code I wrote: 这是我写的代码:
index.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)">● {{x.title}}</a>
<br><br>
</span>
</p>
<script>updates();</script>
</body>
</html>
script.js: 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: updateWindow.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1 id="title"></h1>
<p id="update"></p>
</body>
</html>
I have few problems here: 我在这里有几个问题:
1.When I clicked on the update link, the update window replaced the main page (index.html) window, and also was a full size page. 1.当我单击更新链接时,更新窗口替换了主页(index.html)窗口,并且也是一个完整页面。
2. No change was made in the <h1>
and the <p>
of the updateWindow- although I wrote a script that was suppose to enter an html content to those places. 2.尽管我编写了一个脚本,假设未在这些位置输入html内容,但updateWindow的
<h1>
和<p>
并未进行任何更改。
I don't understand why I didn't get what I expected with this code. 我不明白为什么我没有得到这段代码期望的结果。 Especially, I don't understand the first problem: if I only try to replace the
onclick
content inside index.html
with this: "window.open('updateWindow.html','newwindow','width=600, height=350'); return false;"
特别是,我不明白第一个问题:如果我只尝试用以下内容替换
index.html
的onclick
内容: "window.open('updateWindow.html','newwindow','width=600, height=350'); return false;"
- I get a new additional window with a smaller size as expected (I won't get the update content inside this window, but at least that solves my first problem). -我得到了一个新的附加窗口,其尺寸比预期的要小(我不会在此窗口中获取更新内容,但至少可以解决我的第一个问题)。
What is the problem with my code? 我的代码有什么问题?
Try to use window.open('updateWindow.html','_blank','width=600, height=350');
尝试使用
window.open('updateWindow.html','_blank','width=600, height=350');
instead 代替
it looks to me that the window is not loading before you try to update html: 在您尝试更新html之前,我认为该窗口未加载:
you can see that the html page has not even loaded yet and the dev tools says there is a
Uncaught TypeError: Cannot set property 'innerHTML' of null
try getting the new page to update it onload
in the update page. 你可以看到html页面甚至还没有加载尚未和开发者工具说,有一个
Uncaught TypeError: Cannot set property 'innerHTML' of null
尝试获得新的页面来更新它onload
在更新页面。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.