logo标签列表

如何在 iframe 之间传递 jQuery 数据

phpjqueryhtmliframe
3

我在页面中有两个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个）都是正确的，我无法确定哪一个是最好的，但它们都能正常工作。 - ZeroVash
3个回答
2

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

设置：

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

阅读：

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

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

对不起，由于我计划传输的数据量太大，这个会话无法工作。你能否提供采用POST或GET方法的变体？谢谢。 - ZeroVash
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中找到的一个
标签中。
1
这太棒了...我想看看别人的想法和方法...特别是POST和GET方法。但就目前而言，你的答案是最好的... - ZeroVash
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>

这是第一个框架。名称为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>

这是第二个框架。名称：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 中正在发生的情况。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接