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
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='.php'></iframe>
on this page
.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
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.
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./index.php'></iframe>
on this page
http://www.mysite2./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
Share Improve this question asked Jan 7, 2015 at 19:46 JackNewJackNew 952 silver badges11 bronze badges 3- If the two sites are on different domains, you're gonna have to use Window.postMessage. – JCOC611 Commented Jan 7, 2015 at 19:48
- Are you trying to set the input field on site 1 with data pulled from site 2? – Keenan Lidral-Porter Commented Jan 7, 2015 at 19:50
- trying to set the input field on site 2 with data pulled from site 1 – JackNew Commented Jan 7, 2015 at 19:55
3 Answers
Reset to default 2Since 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.):
<body> <iframe id="site2-frame" src="http://www.mysite2./index.php"></iframe> </body>Site #2 (www.mysite2.) 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\./.test(e.origin)) {
input.value = e.data;
// This will be 'Something something something'
}
});
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./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>
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.