如何在 iframe 之间传输 jquery 数据答案

【问题标题】：how to transfer jquery data between iframes如何在 iframe 之间传输 jquery 数据
【发布时间】：2015-09-23 05:11:18
【问题描述】：

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

第二个 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) 的所有答案都是正确的，我不能准确地选择女巫是最好的，但它们都是有效的。

标签： php jquery html iframe

【解决方案1】：

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

设置：

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

阅读：

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

使用上述方法，您可以使用 GET 或 POST 跨 php 页面传输数据。除非你真的有使用 JQuery 的限制。

【讨论】：

对于我的情况，抱歉会话将无法正常工作，因为我计划传输的数据太多。那么您能否提供带有 POST 或 GET 方法的变体。谢谢

【解决方案2】：

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

【讨论】：

太棒了……我想看看其他人的想法和方法……尤其是 POST 和 GET 方法。但现在你的答案是最好的......

【解决方案3】：

这里我使用了 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>

这里是第一帧。名字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 中发生了什么。

【讨论】：