All geek questions in one place

Filling text input forms on another website in iframe

I want to automatically fill in text fields on another website, so I am writing a short script for this. I am loading an iframe with a website, and if this iframe is loaded, it should fill in the text input forms. So I wrote this in 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 :

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

Here is the fiddle

If I do this with a .php file instead of a website, it works fine. Here is a demo without a website

Can someone give me a hint?

+7
source share
2 answers

When you load a page from another domain into an iframe , you cannot do anything on an iframe page from JavaScript on your page.

As for the browser, the iframe is a separate window and you do not have access to it. Imagine that a user had a bank page open in one window, and your page was open in another window. You know that the browser will not allow your JavaScript code to interfere with the bank page, right?

The same applies when another page is in an iframe . This is still a completely separate browser window, it is simply positioned so that it looks like its page.

In your working example, the code works because the username and password fields are not in the iframe from another domain. They are part of the same page as the JavaScript code.

If the iframe loading from the same domain as your main page, you can do whatever you want, including filling out the form fields. The code will be slightly different because you need to access the iframe document instead of the main page document, but it is easy. But if the iframe belongs to another domain, you're out of luck.

+18
source

By clicking the submit button, the input value is copied from the input text field to the iframe text field (or vice versa). you can implement it like this:

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>

And test2.html:

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

Source: https://habr.com/ru/post/955166/

More articles:


All Articles