Question

我想弄清楚如何从弹出窗口刷新iframe。

我可以在从主页面调用弹出窗口时添加（添加记录），但是我无法弄清楚从iframe中调用的弹出窗口（编辑记录）。

除了驻留在iframe中之外，调用EDIT弹出窗口的按钮是Caspio数据页面，并且是在页面加载期间根据javascript构建的。所有页面都位于同一个域中。

请考虑以下情况。（为简单起见，我删除了类，标题和其他不相关的项目）

主页：

<div id="vehicles">
    <div class="frmHeader">
        <h2>Vehicles</h2>
        <a onclick="popupWindow('addVehicle.html')"></a><!-- ADD vehicle -->
        <a onclick="ifrRefresh('ifrVehicle')"></a>
    </div>
    <iframe src="lic/vehicle.html" name="ifrVehicle" id="ifrVehicle"></iframe>
</div>

iframe内容html文件：

<div id="ifrContentVehicle" class="ifrContent killHeader">
    <script src="/scripts/e1.js"></script>
    <script>try{f_cbload("***","http:");}catch(v_e){;}</script>
</div>

加载后的iframe内容：

<div id="ifrContentVehicle" class="ifrContent killHeader">
    <form id="caspioform">
    <div>
    <table name="cbTable">
    <tbody>
    <tr>
    <td>
        <a onclick="popupWindow('editVehicle.html?VehicleID=*')"></a><!--EDITv-->
    ...

添加车辆：

<script>
    window.onunload = refreshParent;
    function refreshParent() {
        window.opener.ifrVehicle.location.reload();
    }
</script>

这可以刷新名为ifrVehicle的iframe。但是，我无法使用“编辑”弹出窗口。

任何帮助将不胜感激！

Answer 1

我在这里找到了一个适合我的解决方案 - ＆gt; https://stackoverflow.com/a/7244062/4381332

命名主窗口：

window.open('url','windowName');

当popupWindow关闭时，请按名称引用它。

window.onunload = refreshWindowByName;
function refreshWindowByName() {
    window.open('javascript:window.iframeName.location.reload()','windowName');
}

Answer 2

一个简单的选择是使用窗口焦点事件和布尔变量来跟踪弹出窗口是否已打开。
显然，这只会在弹出窗口关闭后刷新iframe 请参阅以下示例：Jsfiddle

HTML：

<button id="open" type="button">Click to open pop-up</button>

Js：

var frameOpened = false;
$(window).on('focus', function() {
    if (frameOpened === true) {
        frameOpened = false;
        $('body').append('<p>Refresh iframe now</p>');
    }
});
$('#open').on('click', function() {
    var popup = window.open("", "popupWindow", "width=600, height=400");
    $(popup.document.body).html("Close the window when ready.");
    frameOpened = true;
});

不依赖焦点事件的替代方法是使用localstorage 这将允许您在后台触发刷新，而无需关闭弹出窗口。显然，这将在没有本地存储的浏览器上中断请参阅以下示例：Jsfiddle

HTML：

<button id="open" type="button">Click to open pop-up</button>

Js：

if (Storage !== void 0) {
    Storage.refreshIframe = void 0;
    var checkForRefresh = function() {
        if (Storage.refreshIframe === true) {
            Storage.refreshIframe = void 0;
            $('body').append('<p>Refresh iframe now</p>');
        }
    };
    $(window).on('focus', function() {
        checkForRefresh();
    });
    setInterval(function() {
        checkForRefresh();
    }, 1000);
    $('#open').on('click', function() {
        var popup = window.open("", "popupWindow", "width=600, height=400");
        var $p = $(popup.document.body);
        $p.append('<button id="refresh" type="button">Refresh iframe</button>');
        $p.find('#refresh').on('click', function() {
            Storage.refreshIframe = true;
        });
    });
}

从不同的窗口（而不是孩子）重新加载iframe - javascript

2 个答案: