来自链接的JavaScript输入数据到iFrame中的文本字段

Question

Good afternoon.

<iframe width="550" id="iframe1" height="350" scrolling="no" src="blah.com/iframe.html"></iframe>

<script type="text/javascript">
    function insertTxt() {
        var textstring = "";
        parent.iframe1.document.getElementsByTagName("input")[0].value = textstring;
    }
</script>

<a href="#" onclick="insertTxt();">test 1</a>
<a href="#" onclick="insertTxt();">test 2</a>
<a href="#" onclick="insertTxt();">test 3</a>
<a href="#" onclick="insertTxt();">test 4</a>

The page which loads in the iframe has 1 input field but has no ID to latch onto. I've been looking all over for a solution to get this to work. I'm trying to get the text 'test 1' or 'test 2' etc to get inserted into this input field within the iframe.

In the iframe file this is the input field html.

<input type="text" autocomplete="off" spellcheck="true" maxlength="361" style="width: 100%; padding: 0px; border: 0px; margin: 0px; outline: 0px; background: rgb(255, 255, 255); color: rgb(0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 15px;">

If anyone is able to help me with the above mess.

Much appreciated.

Answer 1

First of all you are assigning blank string to variable textstring, and second if you are doing it without a webserver it will not work ( you'll get an error Uncaught DOMException , in console).

Follow these steps to get it work

1. Use a webserver
2. Add name="iframe1" on iframe
3. HTML - <a href="#" onclick="insertTxt(this);">test 1</a>

4. Change your function to

    function insertTxt(el) { var textstring = el.text; parent.iframe1.document.getElementsByTagName("input")[0].value = textstring; } 

Answer 2

You may need to configure your server in order to do this, otherwise you'll get CORS errors.

I'm using querySelector here, but it should work with elementsByTagName and id as well.

iFrame.document is undefined, but you can get the contents of the iFrame like this. If you don't get an error trying to do this, then you're good to go.

var iFrame = document.querySelector('#frame1'),
    iFrameContent = iframe.contentDocument || iframe.contentWindow.document;

Then you should be able to query the input from there. If you know the document isn't going to change and is always going to look the same, you'll have to specifically get the input box you're looking for like this

var n = <the n'th input>
var input = iFrame.querySelectorAll('input')[n];

With query selector you can get a little more specific and grab only the inputs where type is text like this:

var m = <the m'th input where type is text>
var input = iFrame.querySelectorAll('input[type="text"')[m]

Then when you get your input, change the value of your input like so:

input.value = "text here";

EDIT

An example of how to use this:

function insertTxt(text) {
    /// get the iFrame and then it's 'document'
    var iFrame = document.querySelector('#frame1'),
        iFrameContent = iframe.contentDocument || iframe.contentWindow.document;
    // get the first input box with type text
    var input = iFrame.querySelectorAll('input[type="text"')[0] 
    // set the value of the input field to that text
    input.value = text; 
}

Changing the input field is easy. The issue you face now is the Cross domain Policy . If that src of that iFrame isn't located on the same web domain you're trying to use this script on, then you'll get an error.