如何在iframe之间传输jquery数据 - how to transfer jquery data between iframes

所以我在页面中有两个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个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} );
});
});

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

设置：

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

读取：

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

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

我尝试在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中。

这里我使用了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中发生了什么。