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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19152646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 14:34:37  来源:igfitidea点击:

Fill input text forms on other website in iframe

javascriptjqueryiframeinput

提问by roemel

I want to autofill textboxes on another website so I'm writing a short script to do this. I'm loading an iframe with a website in it and if this iframe is loaded, it should fill in the input text forms. So I wrote this in autofill.php:

我想在另一个网站上自动填充文本框,所以我正在编写一个简短的脚本来做到这一点。我正在加载一个带有网站的 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>

And this I wrote in fill.js:

这是我写的fill.js

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

Here is a fiddle

这是一个小提琴

If I do it with a .php file instead of a website, it works fine. Here's a demowithout website

如果我用 .php 文件而不是网站来做,它工作正常。这是一个没有网站的演示

Can someone give me a hint?

有人可以给我一个提示吗?

回答by Michael Geary

When you load a page from a different domain into an iframe, you can't do anythingto the iframe page from JavaScript in your page.

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

As far as the browser is concerned, the iframe is a separate window and you have no access to it. Imagine that the user had a banking page open in one window and your page open in another window. You know that the browser would not let your JavaScript code interfere with the banking page, right?

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

The same thing applies when the other page is in an iframe. It's still a completely separate browser window, it's just positioned so it looks like it's inside your page.

当另一个页面位于iframe. 它仍然是一个完全独立的浏览器窗口,它只是被定位,因此它看起来像是在您的页面内。

In your working example, the code works because the username and password fields are notin an iframefrom a different domain. They are part of the same page that the JavaScript code is in.

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

If the iframeis loaded from the same domain as your main page, then you can do anything you want to it, including filling in form fields. The code would be slightly different because you need to access the iframedocument instead of the main page document, but that's easy. But if the iframeis from a different domain, you are out of luck.

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

回答by emad22552

By pressing submit button , input value copies from input textbox to iframe textbox (or opposit of it). you can implement it like:

通过按下提交按钮,输入值从输入文本框复制到 iframe 文本框(或它的对面)。你可以像这样实现它:

test1.html

测试1.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>

And test2.html :

和 test2.html :

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