我试图使用这里的示例：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 回答
慕慕森
TA贡献1856条经验 获得超17个赞
你的问题是这段代码...
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
- 1 回答
- 0 关注
- 63 浏览
添加回答
举报
0/150
提交
取消