CODEWITHSUNDEEP
javascriptphpjqueryhtml
JackNew
JackNew

Reputation: 95

Set value of input field inside an external iframe

I know this have been asked so many times but everyone ask it to suite his own need so couldn't find answer that help me

I have two sites and have access to both and can add whatever I need inside both sites

my first site

http://www.mysite1.com

on this site

I have text field with specific value I have an iFrame whose content are sourced from my other website.

<input type='text' name='test1' value='5'>
<iframe name='myframe' src='http://www.mysite2.com/index.php'></iframe>

on this page

http://www.mysite2.com/index.php

I have input text field

What I am trying to achieve is :

getting the specific value from my first site to the input field in my second site

Upvotes: 3

Views: 9369

Answers (3)

Master Programmer
Master Programmer

Reputation: 476

You can always send vars using iframe url query string name value pairs, and then on page load populate the variables or input fields as you desire.

Upvotes: 0

stekhn
stekhn

Reputation: 2087

JCOC611 is right. In modern web development Window.postMessage is the way to go. Selecting elements within the iframe and changing their value will very like cause cross-origin security errors – for good reasons.

Here is an example, how you could realize exchanging a value across site/iframe using the postMessage event pattern:

<script>
window.onload = function(){

    // Define the target
    var win = document.getElementById('iframe').contentWindow;

    // Define the event trigger
    document.getElementById('form').onsubmit = function(e){

        // Define source value or message
        win.postMessage(document.getElementById('source').value);  
        e.preventDefault();
    };
};
</script>

<form id='form'>
    <input id="source" type='text' value='5'>
    <input type='submit'/>
</form>


<iframe name='myframe' src='http://www.mysite2.com/index.php'>

    <!-- This is what happens inside the iframe -->
    <form id='form'>
        <input id='target' type='text' value=''>
    </form>

    <script>

        // Wait for the message
        document.addEventListener('message', function(e){

            // When you receive the message, add it to the target
            document.getElementById('target').textContent = e.data;
        }, false);
    </script>

</iframe>

Upvotes: 1

Marco Bonelli
Marco Bonelli

Reputation: 69276

Since that manipulating frames that have a different origin will cause a Cross-Origin error to occur, you'll have to use the window.postMessage() method to send a message to the child <iframe> and, inside it, listen to window.onmessage and handle the message.

Here is an example, supposing you have got a DOM structure like this:

  • Site #1 (www.mysite1.com):

    <body>
    <iframe id="site2-frame" src="http://www.mysite2.com/index.php"></iframe>
</body>

  • Site #2 (www.mysite2.com) in the iframe:

    <body>
    <input id="input-field" />
</body>

Then in your site #1 you'll have to send a message to the frame, like this:

var frame = document.getElementById('site2-frame');

frame.contentWindow.postMessage('Something something something', '*');

And in your site #2, the one inside the frame, you'll listen to the message and set the data:

var input = document.getElementById('input-field');

window.addEventListener('message', function(e) {
    // Check the origin, accept messages only if they are from YOUR site!
    if (/^http\:\/\/www\.mysite1\.com/.test(e.origin)) {
        input.value = e.data; 
        // This will be 'Something something something'
    }
});

Upvotes: 2

Related Questions