从不同的 window（不是 child）重新加载 iframe - javascript

Question

我想知道如何从弹出窗口刷新 iframe window。

当从主页调用弹出窗口（添加记录）时我可以做到这一点，但我无法弄清楚从 iframe 中调用的弹出窗口（编辑记录）。

除了驻留在 iframe 中之外，调用编辑弹出窗口的按钮是 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

一个简单的选择是使用 window 焦点事件和一个布尔变量来跟踪弹出窗口是否已打开。
显然，这只会在弹出窗口关闭后刷新 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;
});

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

Answer 2

我在这里找到了适合我的可能解决方案 -> 。

命名主 window:

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

弹出窗口关闭时按名称引用它。

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

从不同的 window（不是 child）重新加载 iframe - javascript

Reload iframe from different window (not child) - javascript

html

javascript

iframe

reload

popupwindow