3

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

Improve this question
3
  • If the two sites are on different domains, you're gonna have to use Window.postMessage. Commented Jan 7, 2015 at 19:48
  • Are you trying to set the input field on site 1 with data pulled from site 2? Commented Jan 7, 2015 at 19:50
  • trying to set the input field on site 2 with data pulled from site 1 Commented Jan 7, 2015 at 19:55

3 Answers 3

Reset to default
2

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' } });
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

What if site #2 is not owned by you, for example google.com
@RickHsu then you can't do anything of the above.
1

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>
Improve this answer

1 Comment

I think Window.postMessage is the way to go but tried your way it didn't work when I press submit nothing happen except /? get add to my site url
0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.