Question

我想在另一个网站上自动填充文本框，所以我正在编写一个简短的脚本来执行此操作。我正在加载一个带有网站的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

有人能给我一个暗示吗？

干杯

Answer 1

当您将其他域中的页面加载到iframe时，您无法从页面中的JavaScript对iframe页面执行任何。

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

当其他页面位于iframe时，同样适用。它仍然是一个完全独立的浏览器窗口，它只是位于页面内部。

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

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

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

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

2 个答案: