Question

因此，在纯HTML中，我可以创建一个将结果加载到iframe的表单（而不是将用户移动到结果网址。）

<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>

我正试图在Greasemonkey中做类似的事情，并遇到问题。

我有一个带有表单的页面，我宁愿将其结果加载到iframe中，所以我创建了一个iframe，并更改了target形式以匹配iframe的名称。但是，这不会在iframe中加载结果页面，而是打开结果页面在新标签页中。

我已经将问题追溯到使用Javascript来创建iframe。它似乎将iframe插入DOM就好了（并查看firebug，来源生成的几乎与上面的相同，除了额外的<script>标记。但是当我在Javascript中创建iframe时，我得到了“在新标签中打开结果” 行为。

<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>

我需要做些什么才能在Javascript创建的iframe中加载结果？（我还没有尝试document.write()，但我不确定Greasemonkey会非常有用。）

更新：所以我开始尝试document.write()，它确实有效。所以也许我只需要弄清楚如何使用GreaseMonkey中的那个（不要弄乱我处理过的众多DOM元素）

<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()不起作用，但document.write()会这样做。

更新² ：它似乎不仅仅是表单，我可以替换链接而不是<form>...</form>并获得相同的结果这三种情况

<div><a target="results" href="http://www.google.com">test</a></div>

Answer 1

好的，我找到了一个满意的解决方案。我需要在调用appendChild()之前定义iframe名称。

<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>

我不确定为什么在将名称附加到文档后设置名称不起作用（我仍然想知道如果有人想要15分钟），但这让我继续我的GreaseMonkeying，所以它已经足够了。

Answer 2

嗯，我正在思考，因为它仍然回归自身，所以永远不会创建框架（因为每次回发都会在页面上创建和呈现表单）

为什么HTML表单不会加载到Javascript创建的iframe中？

2 个答案: