如何在iframe之间传输jquery数据

时间:2015-07-06 06:50:39

标签: php jquery html iframe

所以我在页面中有两个iframe

<div id="ch">
    <iframe name="users" width="220" height="510" align="left" src='messages/users.php' id="userch" ></iframe>
    <iframe name="text"  width="450" height="405" src='messages/text.php'></iframe>
</div>

所以我在第一个iframe中有变量,我需要将它们发送到第二个iframe。我尝试使用方法GET。但任何可行的方法都很好。

首先是iframe

        <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <meta content="10; url=users.php" HTTP-EQUIV=Refresh>  
    <meta content="utf-8" http-equiv="encoding">
    <link href="../css/chat.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="../js/ch_users.js"></script>
    </head>
    <body >
<div class="ess_contact">

<div>
    </body>

    </HTML>

2-nd iframe

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<meta content="utf-8" http-equiv="encoding">  
<meta content="5; url=text.php?active=<?=$active;?>"  HTTP-EQUIV=Refresh> 
</head>
<body onload="scroll(0,100)" link="blue" alink="blue" vlink="blue">
<font size=3 face="Georgia">
<?php

    if (isset($_GET['active']))
    { 
        $active=$_GET['active'];
        echo $active;
        }
?>
</body>

</html>

和js文件

jQuery.noConflict();
jQuery(document).ready(function($) {

$(document).on('click','.ess_contact', function () {

        var active = this.id;   
        $.get( "text.php", { active: active} );

});
});

3 个答案:

答案 0 :(得分:2)

由于您已经在使用PHP,因此可以使用session_start()启动会话,并通过会话变量传递所有数据。

设置:

$_SESSION['myvar']="the data";

读:

if(isset($_SESSION['myvar'])){
   echo $_SESSION['myvar'];
}

使用上述内容,您可以使用GET或POST在php页面之间传输数据。除非你真的有限制使用JQuery。

答案 1 :(得分:1)

我尝试在iframe之间传输数据,这就是我的做法。

<强> main.html中

<html>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
    <h2>Iframe data test</h2><br/>
    <h2>Iframe 1</h2>
    <iframe src="f1.html" id="frame1"></iframe>
    <br/>
    <br/>
    <h2>Iframe 2</h2>
    <iframe src="f2.html" id="frame2"></iframe>
</body>
</html>

<强> f1.html

<html>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
    <h2>Iframe 1 here</h2><br/>
    <input type="text" id="mydata"/><br/>
    <input type="button" id="send" value="send data"/>
</body>

<script>
$(document).ready(function(){
    $("#send").click(function(){
        parent.$("#frame2").contents().find("#target").html($("#mydata").val());
    });
});

</script>
</html>

<强> f2.html

<html>
<body>
    <h2>Iframe 2 here</h2><br/>
    <div id="target"></div>
</body>
</html>

您会在主页面上看到两个iframe。在文本框中键入任何内容,然后单击发送数据,文本框的内容将在第二个iframe中的 div 中设置。

答案 2 :(得分:1)

这里我使用了AJAX。它离你的代码更近了。
在这里我创建了一个jQuery 这是index.php文件。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
          <script src="jquery-1.11.2.min.js"></script>
          <script src="t.js"></script>
    </head>
    <body>
        <h1>Below is iframe</h1>
        <iframe name="users" width="220" height="510" align="left" src='2.php' id="userch" ></iframe>
        <iframe name="text"  width="450" height="405" src='3.php' class="f3"></iframe>

    </body>
</html>

这是第1帧。名称2.php;

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
          <script src="jquery-1.11.2.min.js"></script>
          <script src="t.js"></script>
    </head>
    <body>
        <h2>Hello Milan from frame 2</h2>
        <h2>hello</h2>
        <h2>world!</h2>
                </body>
</html>

这是第2帧。名称:3.php

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
          <script src="jquery-1.11.2.min.js"></script>
          <script src="t.js"></script>
    </head>
    <body>
        <h2>Hello Milan from frame 3</h2>
        <div class="msg"></div>
        <?php
        if(isset($_REQUEST['active']))
        {
            echo $_REQUEST['active'];
        }
        ?>
    </body>
</html>

这是一个名为t.js的jQuery。

function ifrm(){
    $(document).ready(function (){
        $("h2").click(function (){
            var r=$(this).text();
            $.ajax({url:"3.php",data:{active:r},success: function (data) {

parent.$('.f3').contents().find('.msg').html(data);
                }});

        });
    });

}
ifrm();

点击2.php文件中的任何文字,您就会看到3.php中发生了什么。