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

Posted 2023-02-22

【中文标题】从不同的窗口（不是子窗口）重新加载 iframe - javascript

【英文标题】：Reload iframe from different window (not child) - javascript

【发布时间】：2015-03-01 02:43:15

【问题描述】：

我正在尝试弄清楚如何从弹出窗口刷新 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>tryf_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。但是，我无法让它与“编辑”弹出窗口一起使用。

任何帮助将不胜感激！

【问题讨论】：

您的浏览器支持要求是什么？

尼特：铬。我找到了一个解决方案，但它被称为“黑客”，所以我不确定这是最好的方法。我命名主页，然后在弹出窗口卸载时引用它。在编辑弹出窗口

【参考方案1】：

我在这里找到了适合我的可能解决方案 -> https://***.com/a/7244062/4381332。

命名主窗口：

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

popupWindow 关闭时按名称引用它。

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

【参考方案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;
);

---

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

【讨论】：

谢谢；我会调查的。为什么要避免使用其他选项？

如果您需要支持没有本地存储的浏览器，则应避免使用其他选项。这不是现代浏览器的问题。

很高兴听到现代浏览器没有本地存储问题；我将对此进行试验，这样我就不必担心弹出窗口关闭后焦点的位置。