我可以打开一个新窗口，并在JavaScript中更改调用窗口的DOM吗？ [英] Can I open a new window and change the DOM of the calling window in JavaScript?

问题描述

首先，我想说现在我已经编写了大约3个月的JavaScript了，而且我并不是非常关心按照标准或最佳实践来解决这个问题。我主要关心的是学习使用DOM。我不想使用任何jQuery，因为我不熟悉它。

我试图在我的页面上做一个非专业的登录功能，使用JavaScript和DOM。首先我使用最初显示为隐藏的登录屏幕，然后在使用时显示阻止。当我在登录屏幕后面添加了一个黑暗的屏幕时，在登录屏幕下面的页面的主要部分增加了不透明度（0.1不透明度），这样做效果非常好。

当我关闭登录屏幕时，这（不透明度）将恢复正常。所以你可以看到所有的东西在同一个页面中使用相同的DOM。好的，这是我想要的工作方式：你创建一个用户名，然后你创建一个密码。 Boom，完成！

但是这里的问题是：创建用户名和密码后，我想要在最初的登录链接中说出Hello（username here）。我可以使用DOM并将用户名插入到HTML页面中，但是当我提交登录功能的表单时，页面被重新加载，DOM的更改将被删除！

$ b $所以现在我可以告诉你我想到的解决方案：使窗体（登录页面）在一个新的窗口中，所以当窗体被提交（并且DOM被操纵）时，新的窗口被重新加载随后关闭，使主页的DOM保持不变。只有问题是我无法弄明白如何做到这一点。你可能会说这是hahaha的一个主要问题。

那么，我可以从新窗口中处理父窗口（即调用窗口）DOM吗？

解决方案

回答您的答案：您可以使用 window.opener.document 从新窗口;

window.opener 是对调用者窗口的引用（如果有的话，否则 null ），但只有当这两个窗口都来自同一个域时）。

注意：这是一个小网页，还是要通过javascript在网站/应用程序上进行大量的DOM操作？在后一种情况下，您应该使用一个javascript库/框架（我推荐jQuery），以便更轻松地执行脏工作。

First I would like to say that I've been programming JavaScript for about 3 months now and also that I'm not very concerned with solving this problem by the standards or best practices. My main concern is learning to use the DOM. I don't want to use any jQuery because I'm not familiar with it.

I'm trying to make a non-profesional "login" function on my page, using JavaScript and the DOM. To begin with I was using "login" screen that would be displayed "hidden" initially and then be displayed "block" when in use. This worked fine and looked really good when I added a darkened screen behind the "login" screen by adding less opacity (0.1 opacity) to the main part of the page that's beneath the "login screen".

This (the opacity) would return to normal when I closed the "login" screen. So you can see all the stuff is happening within the same page using the same DOM. OK, this is how I wanted it to work: you create a username then you your create a password. Boom, finished!

But here's the problem: after you create a username and password I want it to say "Hello (username here)" where the login link initially was. I could just use the DOM and insert the username into the HTML page, but when I submit the form that is the login function the page gets reloaded and the changes to the DOM become erased!

So now I can tell you about the solution I thought of: make the form (login page) be in a new window, so when the form is submitted (and the DOM is manipulated) the new window is reloaded and then subsequently closes leaving the changes to the main pages DOM intact. Only problem is I can't figure out how to do this. You could probably say that's a major problem hahaha.

So, can I manipulate the parent windows (i.e. the calling window) DOM from the new window?

解决方案

In response to your answer: you can modify the caller window's DOM by using window.opener.document from the new window;

window.opener is a reference to the caller window (if any, otherwise null), but only if both windows are from the same domain).

NOTE: Is it a small webpage or you are going to do a lot of DOM manipulation on a web site/application via javascript? In the later case you should use a javascript library/framework (I recommend jQuery) in order to do the dirty job more easily.

这篇关于我可以打开一个新窗口，并在JavaScript中更改调用窗口的DOM吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！