在 iframe 中填写其他网站上的输入文本表单答案

【问题标题】：Fill input text forms on other website in iframe在 iframe 中填写其他网站上的输入文本表单
【发布时间】：2013-10-03 06:52:44
【问题描述】：

我想在另一个网站上自动填充文本框，所以我正在编写一个简短的脚本来执行此操作。我正在加载一个包含网站的 iframe，如果加载了这个 iframe，它应该填写输入文本表单。所以我在autofill.php写了这个：

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="fill.js"></script>
<iframe name="autofillframe" src="https://e-services.blum.com/main/" style="width:100%; height:100%;"></iframe>

这是我写在fill.js:

$(document).ready(function(e) {
    $('#username').val('username');
    $('#kennwort').val('password');
});

这是fiddle

如果我使用 .php 文件而不是网站，它可以正常工作。这是一个没有网站的demo

谁能给我一个提示？

【问题讨论】：

标签： javascript jquery iframe input

【解决方案1】：

当您将来自不同域的页面加载到 iframe 时，您无法通过页面中的 JavaScript 对 iframe 页面执行任何操作。

就浏览器而言，iframe 是一个单独的窗口，您无法访问它。假设用户在一个窗口中打开了银行页面，而您的页面在另一个窗口中打开。您知道浏览器不会让您的 JavaScript 代码干扰银行页面，对吧？

当另一个页面位于iframe 中时，同样的情况也适用。它仍然是一个完全独立的浏览器窗口，它只是被定位，所以它看起来就像在您的页面内。

在您的工作示例中，代码有效，因为用户名和密码字段不是在来自不同域的iframe 中。它们是 JavaScript 代码所在页面的一部分。

如果iframe 是从与您的主页相同的域加载的，那么您可以对其执行任何操作，包括填写表单域。代码会略有不同，因为您需要访问iframe 文档而不是主页文档，但这很容易。但是，如果 iframe 来自不同的域，那么您就不走运了。

【讨论】：

嗯，好吧，听起来合乎逻辑。有没有其他方法或者这是不可能的？
真的没办法，对不起！浏览器安全不允许这样做。
嗯，好吧，真可惜。谢谢你支持我:)
但是像聊天服务这样的小部件是如何做到的呢？您复制一个脚本标签，然后它就可以在您的网站上运行？

【解决方案2】：

通过按下提交按钮，输入值从输入文本框复制到 iframe 文本框（或与之相反）。你可以像这样实现它：

test1.html

<!doctype html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#submit').click(function(){
                var iframe = document.getElementById('myiframe');
                var doc = iframe.contentDocument || iframe.contentWindow.document;
                var elem = document.getElementById('username');
                doc.getElementsByName('user')[0].value = elem.value;
            });
        });
    </script>
</head>
<body>
    <input type="text" id="username">
    <input type="submit" id="submit">
    <iframe id="myiframe" frameborder="1" src="test2.html"></iframe>
</body>
</html>

还有 test2.html：

<!DOCTYPE html>
<html>
<body>
    <input type="text" name="user" id="user">
</body>
</html>

【讨论】：