个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我是 JavaScript 新手，我之前问了一个问题并得到了对我有帮助的答案，但我认为我可以将它合并到我正在使用的更大的表单中，但现在我又陷入困境了。
我有一个大表单，其中有一个选择选项。填写表单后，将打开一个新窗口，并将提交的值合并到邀请类型页面中。
除了这个选择选项之外，其他一切都正常。我遇到的问题是根据选择，我希望将不同的文本写入新窗口(作为整个新窗口邀请页面的一部分)。
我真的很接近，主要是我今天早些时候收到的帮助 - 我可以让新窗口只显示我命名的选项值，或者我可以得到一个带有不同文本的全新窗口(即不是邀请页面的一部分)。我只是无法将两者结合起来。
我写了一个较小的页面，以防有人想看一下。提前致谢。
<!doctype html>
<html>
<head>
<title>JavaScript Forms</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script type="text/JavaScript">
function newWindow() {
allInfo = open("", "displayWindow");
allInfo.document.open();
allInfo.document.write('<!doctype html><html><head><link rel="stylesheet" type="text/css" href="mystyle_invite.css"><title>Resume</title><meta charset="utf-8"> </head><body>');
allInfo.document.write(document.getElementById ('firstname').value);
allInfo.document.write('</body></html>');
allInfo.document.close();
}
function showName() {
var doIt=document.getElementById('firstname').value;
if ( doIt == "Michael" ) {
allInfo.document.write("Mr. " + doIt); //only "Mikey" is written out
}
else if ( doIt == "Sam" ) {
allInfo.document.write("Mrs. " + doIt);
}
else {
allInfo.document.write("Sir " + doIt);
}
}
</script>
</head>
<body>
<script type="text/JavaScript">
</script>
<form id="infoForm" method="post" name="infoForm">
<p>First Name:</p>
<p><select id="firstname" onChange="showName()" >
<option value="Mikey">nickname1</option>
<option value="Sammy">nickname2</option>
<option value="Sir Doug">nickname3</option>
</select></p>
<p> <input type="button" value="Submit Information" onClick="newWindow()"></p>
</form>
</body>
</html>
最佳答案
这里有些东西可以提供很大帮助。第一次打开第二个窗口对于用户和程序员来说都是痛苦的经历。除非您有绝对需要，否则我建议您操作当前窗口的 DOM 以显示弹出窗口。
下一步是否可以使用 DOM 方法来更改页面内容。 document.write 带来了很多问题，在您的情况下这些问题并不明显。主要是它可以删除你当前的 DOM。您在示例中没有注意到这一点，因为新窗口是空白的，因此重写它是偶然的。
最后，使用 allInfo 是引用全局变量的一种奇怪的方式。从代码风格来看，这是不容易理解的。事实上，任何 linter 都会因您使用全局而抛出错误，并且如果您在函数中声明“use strict”，则会出现错误。最好学习良好的编码实践方式。
由于我们希望与您的情况下的变量 (allInfo) 进行交互，因此我们应该将该值封装在一个对象中。该对象可以保存该引用的状态并提供与它的一些抽象交互。通过这样做，您可以避免污染全局 namespace ，并允许您交换实现，而不必重写程序中依赖于它的部分。
// Our welcome window object
function WelcomeWindow() {
// save a reference to the content of your new window
// to be printed when ready. (Lazy execution)
this.innerHTML = '';
}
WelcomeWindow.prototype.open = function() {
this.win = window.open("", "displayWindow");
return this;
};
WelcomeWindow.prototype.close = function() {
this.win.close();
return this;
};
WelcomeWindow.prototype.write = function(html) {
this.innerHTML += '' + html;
return this;
};
WelcomeWindow.prototype.render = function() {
if (!this.win) { throw new Error("window has not been opened yet."); }
this.win.open();
this.win.write('<!doctype html><html><head><link rel="stylesheet" type="text/css" href="mystyle_invite.css"><title>Resume</title><meta charset="utf-8"> </head><body>');
this.win.write(this.innerHTML);
this.win.write('</body></html>');
this.win.close();
return this;
};
这允许我们在窗口打开之前以声明方式对其进行操作。例如，如果我们想将名称添加到窗口:
function NameField(id) {
this.element = document.getElementById(id);
}
NameField.prototype.toString = function() {
var name = this.element.value;
switch (name) {
case 'Michael': return 'Mr. Michael';
case 'Sam': return 'Mrs. Sam';
default: return 'Sir ' + name;
}
};
NameField.prototype.toHtml = function() {
return '<strong>' + this.toString() + '</strong>';
};
使用代码将其链接在一起，因为将事件添加到 DOM 中只会混淆标记和代码的分离。
window.onload = function() {
var form = document.getElementById('infoForm');
form.onsubmit = function(e) {
e.preventDefault();
var name = new NameField('firstName');
new WelcomWindow()
.write(name.toHtml())
.open()
.render();
return false;
};
};
关于javascript - 无法在 JavaScript 中正确使用新窗口表单中的选择选项值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24728499/
25
4
0
我正在尝试使用特定路线打开一个新窗口，但似乎路线页面未正确加载。将从FrmApprovalMain.js打开新的 Electron 窗口，并应使用FrmPOdet.js打开新窗口。但是，当它打开时，会
我对 Tkinter 比较陌生，我需要帮助。 当从父窗口单击按钮时，我创建了一个新窗口。新窗口是 def new_Window。但我似乎无法获取窗口中的信息，如下编码: from tkinter im
我正在尝试使用 Javascript 从空白 iframe 中创建一个重定向，该 iframe 将定向到新窗口或选项卡中的 URL。 更具体地说，我试图让一个 Facebook 标签指向我公司的网页，
在问这个问题之前，我确实搜索了很多。抱歉，如果这是一个简单的问题。 在我的 wxWidgets 应用程序中，我想从菜单选项中新建一个 wxHtmlWindow。 (我已经正确显示了我的主应用程序窗口)
我认为我不是很了解这个，因为我对 jquery 还很陌生。我有一个隐藏了 3 个食谱的页面。单击食谱 A 的链接时，它会以模式打开。我希望能够只打印食谱的内容。所以我打开一个新窗口(非模态)并尝试将食
我想在带有可滚动文本框的现有主 Windwoe 旁边创建一个新窗口。 我在主窗口中按下“打开新窗口”按钮，然后它应该会打开一个带有可滚动文本框的新窗口。 在 form2 中 在 WPF 中，您可以在主
我正在使用 Simple Icons 制作自定义 Pinterest Pin It 按钮，我正在使用 Pinterest Widget Builder 给我的链接。在默认的 Pin It 按钮上，它会
我的表单上出现一个确认对话框，单击“确定”后会将用户重定向到另一个页面。 但是，是否可以在新窗口中打开该页面(例如 target="_blank") 我正在使用的代码是: var answer=con
相关但处于休眠状态:Javascript to open URL within a new Tab和其他一些...... 我有一个客户坚持认为特定链接需要在新选项卡中打开，而不是在窗口中打开。它由表单
我遇到了 Android 问题 WebView , 我想用 target='_blank' 打开一个 URL在同一WebView ，就像所有其他的一样URLs正在开放。 另请注意，我重写了 WebVi
可以从 Controller 重定向到某个 url 并同时在新窗口中打开该 url 吗？ 最佳答案 不是真的来自 Controller Action 。 重定向是带有 301/302 状态代码和 Ra
在 Electron vue 中，我想为每个新窗口创建新的 vue 实例。这工作正常，直到我想将路由器子组件加载到新窗口。例如我有条目 add: path.join(__dirname, '../sr
案例1: var printWindow = window.open("", "print_window"); if(printWindow) { printWindow.addEventLi
我需要使用 Javascript Window.Open 函数打开一个新的 (_blank) 窗口。 URL 编码的回车符/换行符 (%0A) 似乎不起作用。有谁知道解决这个问题？例如，我有以下 UR
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 想改进这个问题？将问题更新为 on-topic对于堆栈溢出。 1年前关闭。 Imp
当 flash 有键盘焦点时，CTRL+T(新标签)和 CTRL+N(新标签)窗口)被闪光拦截。 有没有办法将这些事件传递给浏览器以便它们工作(打开新选项卡，打开新浏览器)或者是否有用于这些操作的 j
我有一个 ASP.Net MVC 页面，上面有一个非常简单的表单:一个文本框和一个提交按钮。该表单使用标准的 mvc BeginForm() 语法: 当直接打开页面时，一切正常。 但是，我们有另一个
如果您对此问题感兴趣，请阅读下面的更新 #2 ;) 假设我将此代码放入我的扩展程序的 JS 中。 var reader = { onInputStreamReady : function(in
我是一名优秀的程序员,十分优秀！