添加 iframe 内容的脚本在 chrome 中没有用户代理样式答案

【问题标题】：scripts add iframe content do not have user agent style in chrome添加 iframe 内容的脚本在 chrome 中没有用户代理样式
【发布时间】：2017-11-17 19:43:56
【问题描述】：

chrome 版本：58

通常，表单将具有用户代理样式margin-bottom: 1em;

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="utf-8" />
  </head>

  <body>
    <form action="#">
      First name:<br><input type="text" name="firstname" value="Mickey"><br>
      Last name:<br><input type="text" name="lastname" value="Mouse"><br><br>
      <input type="submit" value="Submit"></form>
      <div>hello world</div>
  </body>

</html>

with user agent style

但是当我通过脚本向 iframe 添加内容时，表单没有样式margin-bottom: 1em;

    <!DOCTYPE html>
    <html>
        <head>
            <title>clack test</title>
            <meta charset="utf-8" />
        </head>
        <body>
            <script>
                var iframe = document.createElement("iframe");
                iframe.id = 'iframe';
                iframe.width = '100%';
                iframe.height = '886';
                iframe.setAttribute("scrolling", "no");
                iframe.setAttribute("frameborder", "0");
                document.body.appendChild(iframe);

                // find the iframe's document and write some content
                var idocument = iframe.contentDocument;
                idocument.open();
                idocument.write("<!DOCTYPE html>");
                idocument.write("<html>");
                idocument.write("<head></head>");
                idocument.write('<body><form action="/demo/demo_form.asp\">First name:<br><input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></form><div>hello world</div></body>');
                idocument.write("</html>");
                idocument.close();
            </script>
        </body>
    </html>

without user agent style

我想知道如何让用户代理样式在 iframe 中工作。谢谢

【问题讨论】：

标签： javascript html css google-chrome iframe

【解决方案1】：

script = document.getElementById("js");
iframe = document.createElement("iframe");
document.body.appendChild(iframe);
iframe.appendChild(script);

<script id="js">
  // the script you want to inject
  alert("Injected");
  console.log("Injected");
</script>

尝试使用类似的东西

HTML：

<script id="js">
 // the script you want to inject 
</script>

JS：

script = document.getElementById("js");
iframe.appendChild(script);

我在LiveWeave 发了一个Weave。

【讨论】：

我看不出它怎么会清空。当我单击我提供的链接时，它显示得很好，但我继续前进并添加了一个 sn-p。
sn-p 没有为我提供任何错误。当我运行 sn-p 时，它会像应有的那样提醒“已注入”。你用的是什么浏览器？
也许吧。我在 Acer Chromebook 15 上使用的是最新版本的 Chrome。