代码之家  ›  专栏  ›  技术社区  ›  rampion

为什么HTML表单不加载到由javascript创建的iframe中?

  •  1
  • rampion  · 技术社区  · 16 年前

    因此,在纯HTML中,我可以创建一个将其结果加载到iframe中的表单 (而不是将用户移动到结果URL)。

    <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> 
    
    2 回复  |  直到 16 年前
        1
  •  1
  •   rampion    16 年前

    好吧,我想出了一个令人满意的解决方案。我需要定义iframe名称 之前 我打电话 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>
    

    我不知道为什么在文档中附加后设置名称不起作用(我仍然想知道 如果有人想要15分),但这让我可以继续我的加油,所以这就足够了。

        2
  •  -1
  •   jonezy    16 年前

    嗯,我在想,因为它仍然回发到自身,所以框架永远不会被创建(因为表单是在每次回发的页面上创建和呈现的)