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

Reload iframe from different window (not child) - javascript

本文关键字：窗口 新加载 iframe-javascript 加载      更新时间：2023-09-26

我正在尝试弄清楚如何从弹出窗口刷新iframe。

当从主页（ADDing 记录）调用弹出窗口时，我可以这样做，但我无法弄清楚从 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 Content 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。但是，我无法让它与编辑弹出窗口一起使用。

任何帮助将不胜感激！

我在这里找到了一个可能的解决方案，对我有用-> https://stackoverflow.com/a/7244062/4381332。

命名主窗口：

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

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

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

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