admin管理员组

文章数量:1391836

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

  • javascript
  • php
  • jquery
  • html
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
Add a ment  | 

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.):

    <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.

本文标签： javascriptSet value of input field inside an external iframeStack Overflow

版权声明：本文标题：javascript - Set value of input field inside an external iframe - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744704882a2620783.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。