Вызов сценария jQuery на родительской странице при нажатии кнопки в iframe - PullRequest
Новая
       1

Вызов сценария jQuery на родительской странице при нажатии кнопки в iframe

3 голосов
/ 11 декабря 2011

У меня есть страница, которая содержит динамически загруженную <iframe>.Этот iframe содержит <form>.Когда пользователь отправляет <form>, новая страница загружается в <iframe>, говоря Спасибо .

Вместо использования второй страницы, я хочуродительская страница, чтобы показать сообщение Спасибо .

Так что в основном я нахожусь в моем <iframe>, и я хочу вызвать функцию в родительском фрейме.

Как можноя делаю это?

Ответы [ 2 ]

1 голос
/ 11 декабря 2011

Из iframe можно вызвать функцию, объявленную в родительском окне, используя window.top.functionName(). Но чтобы это работало, обе страницы должны быть размещены в одном домене. На них распространяется Одинаковая политика происхождения . Это означает, что если вы хотите протестировать этот пример, вы должны использовать сервер ( wamp , xampp и т. Д.).

page.html (обновлено) 

<html>
<head>
    <title>Page 1</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>
        window.foo = function(){
            alert('page 1 is executing this code');
        }
        $(function(){
            $('body').append('<iframe src="iframeContent.html"></iframe>');
        });
    </script>
</head>
<body></body>
</html>

iframeContent.html 

<html>
<head>
    <title>Page 2</title>
</head>
<body>
    i am the iframe. This is my button.
    <button onclick="javascript:window.top.foo()">click me</button>
</body>
</html>
0 голосов
/ 11 декабря 2011

Я сделал небольшой пример для вас.

Вот главная страница (index.html) , содержащая iframe 

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    </head>
    <body>
        <input type="hidden" id="infoFormPosted" value=0 />
        <iframe src="./iframe.html"></iframe>
        <div id="thanks" style="display:none;">
            Thanks!
        </div>
    </body>
</html>

А вот ифраме (iframe.html) : 

<html>
    <head>
        <title>myIframe</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
         <script type="text/javascript">
         $(document).ready(function() {
            $("#infoForm").submit(function() {
              //change the value of the top document input hidden to 1
              $("#infoFormPosted", top.document).val(1);
            });
            // if the input hidden is set to 1
            if($("#infoFormPosted", top.document).val() == 1){
                // show the thanks div on the top document (not in the iframe)
                $("#thanks", top.document).show();
            }
        });

        </script>
    </head>
    <body>
        <div id="anydiv">
            <form id="infoForm" action="#" method="post">
              First name: <input type="text" name="fname" /><br />
              Last name: <input type="text" name="lname" /><br />
              <input type="submit" value="Submit" />
            </form> 
        </div>
    </body>
</html>

РЕДАКТИРОВАТЬ: Альтернативой является создание функции на главной странице и вызов ее в iframe, используя parent.nameOfTheFunction()

Главная страница (index.html) 

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
        showThanks = function(){
            $("#thanks").show();
        };

        </script>
    </head>
    <body>
        <input type="hidden" id="infoFormPosted" value=0 />
        <iframe src="./iframe.html"></iframe>
        <div id="thanks" style="display:none;">
            Thanks!
        </div>
    </body>
</html>

iframe (iframe.html) : 

<html>
    <head>
        <title>myIframe</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
         <script type="text/javascript">
         $(document).ready(function() {
            $("#infoForm").submit(function() {
              //change the value of the top document input hidden to 1
              $("#infoFormPosted", top.document).val(1);
            });
            // if the input hidden is set to 1
            if($("#infoFormPosted", top.document).val() == 1){
                // call showThanks function from the main frame
                parent.showThanks(); 
            }
        });

        </script>
    </head>
    <body>
        <div id="anydiv">
            <form id="infoForm" action="#" method="post">
              First name: <input type="text" name="fname" /><br />
              Last name: <input type="text" name="lname" /><br />
              <input type="submit" value="Submit" />
            </form> 
        </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...