每次 iframe 使用 iframe 值重新加载时更新父值答案

【问题标题】：Update parent value every time iframe reloads with iframe value每次 iframe 使用 iframe 值重新加载时更新父值
【发布时间】：2015-06-19 05:01:20
【问题描述】：

我有一个带有 iFrame 的页面，并且希望每次 iFrame 从 iFrame 中的表单提交加载时更新父级中的值。这是父代码中的代码：

<div id="updField" style="display: block; float: left; margin: 12px 0px 0px 20px; width: 300px; font-size: 14px; color: #CC0000;">
   Test Update Field
</div>

这是 iFrame 中的 jQuery：

$(window).on('load', function() {
    $("#updField", window.parent.document).text("<?php echo $dupdate; ?>");
});

第一次加载 iFrame 时，父 div 会更改以显示 $dupdate 的值。如果我提交 iFrame 中更改 $dupdate 值的表单，则父 div 不会更新。我希望每次 iFrame 加载时都更新父 div。非常感谢任何帮助。

【问题讨论】：

要逐步调试，请尝试在表单的提交事件上设置文本。
除了实际问题：您是否尝试在客户端运行 PHP：.text("<?php echo $dupdate; ?>");。你需要发回数据并在客户端使用，你不能用 Javascript/jQuery 编写 PHP。
不是 php 页面，第一次加载页面时 $dupdate 变量没有问题。父 div 不会在后续加载时更新。

标签： javascript jquery html iframe

【解决方案1】：

更新：

好的，这是完整的工作代码。很抱歉之前的错误。同样的想法。父级跟踪子级加载事件，然后进入并从某个 div 中获取您想要的值。

两个文件：blah.html 和 childblah.html。

Blah.html

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("#myFrame").on("load", function () {
    var infoContainer = $("#myFrame").contents().find("#someDiv");
    if (infoContainer!=null)
       $("#updField").text(infoContainer.text());
        });
        });

</script>

</head>
<body>
    <iframe id="myFrame" src="childblah.html" > </iframe>
    <div id="updField">
    </div>
</body>
</html>

childblah.html

<html>
<head>
</head>
<body onload="setTimeout(function(){document.location.href='childblah.html';},3000)">
    <div id="someDiv">
        xxxxxxx<div id='dv' />
        <script>var dt=new Date();document.getElementById('dv').innerHTML=dt;</script>
    </div>
</body>
</html>

如果内容存在，您可以只从指定位置获取内容，而不是让孩子写入值。

【讨论】：

在 if (infoContainer!=null) 和 $("#updField").text(infoContainer.text()); 之后添加了一个花括号。不工作。我确实喜欢从父级触发事件的想法，只是不知道该怎么做。
已更新完整代码。很抱歉转录/复制粘贴错误。
iFrame 在 3 秒后消失。在显示期间，日期显示在 iFrame 页面上，而不是在父 div 中。
你能看看这里吗？ mikesimon.com/stack/blah.html 它似乎可以在 Chrome、IE 11 和 Firefox 中运行。

【解决方案2】：

我刚刚对您的代码进行了微小的更改，这对我有用。这是我的演示代码：主文件：index.html 注意：请更新 Iframe 中的文件路径

<!DOCTYPE html>
<html>
<body>
<div id="updField" style="display: block; float: left; margin: 12px 0px 0px 20px; width: 300px; font-size: 14px; color: #CC0000;">Test Update Field</div>
<iframe src="http://localhost/other/stckoverflow/update-parent-content-from-iframe/file.php">
  <p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>

iframe 文件：file.php

<?php
    $msg='no message text';
    if(isset($_REQUEST['submit'])){
        if(isset($_POST['msg'])){ $msg = $_POST['msg'];}
    }
?>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="msg"><?php echo $msg; ?></div>
<form action="#" method="post">
    <input type="text" name='msg' />
    <input type="submit" name="submit" value="submit" />
</form>
<script type="text/javascript">
    $("#updField", window.parent.document).text("<?php echo $msg; ?>");
</script>
</body>
</html>

【讨论】：