Question

我有一个包含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都会更新。非常感谢任何帮助。

Answer 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>

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

Answer 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>

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

2 个答案: