为什么不将HTML表单加载到Javascript创建的iframe中？ [英] Why won't an HTML form load into a Javascript-created iframe?
问题描述
中的表单（而不是将用户移动到结果url）。
< HTML>
< head>
< title> Google预览< / title>
< style> iframe {width：800px; height：600px}< / style>
< / head>
< body>
< form method ='get'action ='http：//www.google.com/search'target ='results'>
< label for ='q'> Google搜寻：< / label>
< input name ='q'/>
< / form>
<！ - 在此iframe中形成结果加载 - >
< iframe name ='results'>< / iframe>
< / body>
< / html>
我试图在Greasemonkey中做类似的事情，并遇到问题。
我有一个表单，我宁愿将结果加载到iframe中，
，因此我创建了一个iframe，并将 target 以匹配iframe的名称。
但是，这并不会加载iframe中的结果页面，而是会在新标签页中打开
结果页面。
已经将问题追溯到使用Javascript创建iframe。看起来
将iframe插入到DOM中很好（看着firebug，生成的源
与上面几乎相同，除了一个额外的< script> 标签）。
但是当我在Javascript中创建iframe时，我得到'在新选项卡'
行为中打开结果。
$ b
< HTML>
< head>
< title> Google预览< / title>
< style> iframe {width：800px; height：600px}< / style>
< / head>
< body>
< form method ='get'action ='http：//www.google.com/search'target ='results'>
< label for ='q'> Google搜寻：< / label>
< input name ='q'/>
< / form>
< script>
try {
//表单结果不加载在这个iframe中，出于某种原因
const iframe = document.body.appendChild（document.createElement（'iframe'））;
iframe.name ='results';
} catch（e）{
alert（e）;
}
< / script>
< / body>
< / html>
我需要做什么才能将结果加载到由Javascript创建的iframe中？ （我还没有试过 document.write（），但我不确定这对Greasemonkey是非常有用的。）
更新：所以我尝试了 document.write（），它可以工作。因此，也许我只需要弄清楚如何使用GreaseMonkey中的这些元素（而不会搞乱我所处理的大量DOM元素）
< HTML>
< head>
< title> Google预览< / title>
< style> iframe {width：800px; height：600px}< / style>
< / head>
< body>
< form method ='get'action ='http：//www.google.com/search'target ='results'>
< label for ='q'> Google搜寻：< / label>
< input name ='q'/>
< / form>
< script>
尝试{
//但是表单结果会载入这个iframe
document.write（'< iframe name =results>< / iframe>'）;
} catch（e）{
alert（e）;
}
< / script>
< / body>
< / html>
我仍然想知道为什么 update 2 ：它似乎不仅仅是表单，我可以替换 好的，我想出了一个令人满意的解决方案。我需要在调用 我不确定为什么在将文件追加到文档后设置名称不起作用如果有人想要15分，我仍然想知道 So, in pure HTML, I can create a form that loads its results into an iframe
(instead of moving the user to the result url). I'm trying to do a similar thing in Greasemonkey, and running into issues. I have a page with a form that I'd rather have load its results into an iframe,
so I create an iframe, and change the form I've traced the problem down to using Javascript to create the iframe. It seems
to insert the iframe into the DOM just fine (and looking at firebug, the source
generated is nearly identical to that above, except for an extra What do I need to do to get the results to load in a iframe created by Javascript? (I haven't tried update: So I got around to trying I'm still want to know why update2: it doesn't seem to be just forms, I can substitute a link in instead of the
Okay, I figured out a satisfactory solution. I need to define the iframe name before I call I'm not sure why setting the name after appending it to the document didn't work (and I'd still like to know
if anyone out there wants 15pts), but this lets me get on with my GreaseMonkeying, so it's good enough. 这篇关于为什么不将HTML表单加载到Javascript创建的iframe中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ document.body.appendChild（） 不起作用，但是 document.write（）没有。
< form> ...< >< / code>并获得所有三种情况下的相同结果
< div>
appendChild（）之前定义iframe名称。
< HTML>
< head>
< title> Google预览< / title>
< style> iframe {width：800px; height：600px}< / style>
< / head>
< body>
< div>< a target =resultshref =http://www.google.com>测试< / a>< / div>
< script>
尝试{
//这可以工作
const iframe = document.createElement（'iframe'）;
iframe.name ='results';
document.body.appendChild（iframe）;
} catch（e）{
alert（e）;
}
< / script>
< / body>
< / html>
），但是这让我可以继续使用我的GreaseMonkeying，所以这已经足够了。<html>
<head>
<title>Google Preview</title>
<style>iframe { width: 800px; height: 600px }</style>
</head>
<body>
<form method='get' action='http://www.google.com/search' target='results'>
<label for='q'>Google Search:</label>
<input name='q'/>
</form>
<!-- form result loads in this iframe -->
<iframe name='results'></iframe>
</body>
</html>
target to match the iframe's name.
However, this doesn't load the result page in the iframe, but instead opens the
result page in a new tab.<script> tag).
But when I create the iframe in Javascript, I get the 'open results in a new tab'
behaviour.<html>
<head>
<title>Google Preview</title>
<style>iframe { width: 800px; height: 600px }</style>
</head>
<body>
<form method='get' action='http://www.google.com/search' target='results'>
<label for='q'>Google Search:</label>
<input name='q'/>
</form>
<script>
try {
// form result doesn't load in this iframe, for some reason
const iframe = document.body.appendChild( document.createElement('iframe') );
iframe.name = 'results';
} catch (e) {
alert(e);
}
</script>
</body>
</html>
document.write() yet, but I'm not sure that would be very useful from Greasemonkey).document.write(), and it works. So maybe I'll just have to figure out how to use that from GreaseMonkey (without messing up my multitude of DOM elements I have handles to)<html>
<head>
<title>Google Preview</title>
<style>iframe { width: 800px; height: 600px }</style>
</head>
<body>
<form method='get' action='http://www.google.com/search' target='results'>
<label for='q'>Google Search:</label>
<input name='q'/>
</form>
<script>
try {
// but form result will load in this iframe
document.write('<iframe name="results"></iframe>');
} catch (e) {
alert(e);
}
</script>
</body>
</html>
document.body.appendChild() doesn't work, but document.write() does.<form>...</form> and get the same results for all three cases<div><a target="results" href="http://www.google.com">test</a></div>
appendChild().<html>
<head>
<title>Google Preview</title>
<style>iframe { width: 800px; height: 600px }</style>
</head>
<body>
<div><a target="results" href="http://www.google.com">test</a></div>
<script>
try {
// this works
const iframe = document.createElement('iframe');
iframe.name = 'results';
document.body.appendChild( iframe );
} catch (e) {
alert(e);
}
</script>
</body>
</html>
