运行代码以填充不同 html 页面上的表单字段时出现未捕获的 TypeError
我试图使用这里的示例：
https://developer.mozilla.org/en-US/docs/Web/API/Document/forms
供我自己使用。
上面的示例是访问同一页面上的表单。我的示例尝试填充不同页面上的字段。
这是启动器 html - launcher.html：
<!DOCTYPE HTML>
<html>
<head>
<title>Launcher page</title>
<script>
function launch(text) {
window.open("http://localhost/page2.html", '_blank');
let entryform = window.document.forms.newentry;
entryform.elements.town.placeholder = text;
window.focus();
}
</script>
</head>
<body>
<p>Click button to launch page2 and populate edit box on form</p>
<button type="button" id="launcher" onclick="launch('Edinburgh')">populate a text field on a different page</button>
</body>
</html>
以及启动的页面 - page2.html：
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
</head>
<body>
<header>
<h1>This page launched from launcher.html</h1>
</header>
<main>
<form name="newentry">
<p>Town: </p><input type="text" name="town" value="">
</form>
</main>
</body>
</html>
但是，当我单击 launcher.html 上的按钮时，launcher.html 页面上出现错误：
entryform.elements.town.placeholder = text;
Uncaught TypeError: Cannot read property 'elements' of undefined
at launch (launcher.html:10)
at HTMLButtonElement.onclick (launcher.html:20)
为什么这个元素属性未定义？
我怎样才能解决这个问题？
编辑我真正想做的很简单，但是返回的 window.open 对象在我尝试编辑时尚未准备好。真正简单的解决方案是这样的：
function launch(text) {
let p2win = window.open('page2.html', '_blank');
p2win.onload = function(){
p2win.document.forms.newentry.town.value = text;
}
}
肥皂起泡泡1回答
-
慕慕森
你的问题是这段代码...let entryform = window.document.forms.newentry;正在当前窗口（即launcher.html）中查找表单元素。您可以做的是保存对弹出窗口的引用并通过该引用访问其元素。let popup = window.open("http://localhost/page2.html", '_blank')let entryform = popoup.document.forms.newentry// and so on作为替代方案，我会考虑将查询参数传递到弹出页面，而不是尝试在外部操作它。例如window.open(`page2.html?placeholder=${encodeURIComponent(text)}`, '_blank')然后在page2.html...<main> <form name="newentry"> <p>Town: </p><input type="text" name="town" value=""> </form></main><script>let query = new URLSearchParams(location.search)document.querySelector('form[name="newentry"] input[name="town"]') .placeholder = query.get('placeholder')</script>现场演示 ~ https://codesandbox.io/s/dependent-archimedes-51vn2
随时随地看视频慕课网APP
相关分类
Html5