时间戳

首页 > 解决方案 > 无法在 Reactjs 中关闭 iframe 引用

javascript - 无法在 Reactjs 中关闭 iframe 引用

问题描述

我创建了 iframe 的引用，我将其作为参数发送到 API 调用。收到回复后，我想关闭该 iframe，但是当我使用“iframe.close”时它不会关闭。

    let refIframe = document.createElement('iframe');
    refIframe.setAttribute('id', 'refIframe');
    refIframe.setAttribute('src', 'www.google.com');
    refIframe.style.zIndex = '2';
    refIframe.style.display = 'block';
    refIframe.style.width = '30%';
    refIframe.style.height = '92vh';
    refIframe.style.margin = '2% 35%';
    document.body.after(refIframe, document.body);
    let iframe = document.getElementById('refIframe').contentWindow;
    checkout.params.windowRef = document.getElementById('refIframe').contentWindow;

从 API 调用收到响应后，我将执行以下操作来关闭 iframe 的引用。

    iframe.close();

但是这样做我的 iframe 不会关闭。

谁能指导我我做错了什么，因此我的 iframe 没有关闭。如果提供了修改后的代码，这对我理解真的很有帮助。

如果有人可以告诉我在不使用 componentDidMount 的情况下创建 iframe 引用，那将非常有帮助。

标签： javascriptreactjsiframe

解决方案

既然您已经声明您的目标是从 dom 中删除 iframe。尝试以下而不是iframe.close()：

setTimeout(()=>{

  document.getElementById('refIframe').remove()

}, 2000)
//placed inside a timeout for demonstration purposes only... so you can see the iframe being removed from dom
<div>Element Before Iframe</div>
<iframe id="refIframe"></iframe>
<div>Element After Iframe</div>

但是，如果您想保留<iframe>元素，但又希望 iframe 中的页面停止“打开”，则可以将 iframe 的src属性修改为其他内容（甚至是空字符串），从而“导航”离开当前页面内嵌框架。

setTimeout(()=>{

  document.getElementById('refIframe').src = "" 
  //setting to empty string will put no webapge inside the iframe

},2000)
<iframe id="refIframe" src="https://wikipedia.org"></iframe>

推荐阅读