Question

在 MS Edge 上异步设置新空白选项卡上的 location.href 不起作用

2020-01-13

366

javascript microsoft-edge

我想使用 _authTab = window.open('', '_blank'); 打开新标签页并异步设置其网址例如 setTimeout(() => _authTab!.location.href = 'https://stackoverflow.com/', 2000); 。在 Chrome 上一切正常：打开空白页，2 秒后加载 https://stackoverflow.com/ 。

function setUrlAsync(): AsyncAction {
  let _authTab: Window | null;
  return async (dispatch, getState, api) => {
    try {
      let authTab: AuthWindow;
      _authTab = window.open('', '_blank'); // A new window has to be be opened synchronously to avoid pop-up blockers (https://stackoverflow.com/questions/2587677/avoid-browser-popup-blockers)
      setTimeout(() => _authTab!.location.href = 'https://stackoverflow.com/', 2000);
    } catch (error) {
      authActions.callbackUrlNotReceived({ error });
      throw error;
    }
  };
}

Ms Edge 抛出错误，导致新标签页停留在 _blank

[object Error]: {description: "Permission denied", message: "Permission denied", nr@seenError: true, number: -2146828218, stack: "Error: Permission denied at Anonymous function (https://52f62d4b.ngrok.io/:149596:15) at nrWrapper (Unknown script code:1:16969)"}
description: "Permission denied"
message: "Permission denied"
nr@seenError: true
number: -2146828218
stack: "Error: Permission denied at Anonymous function (https://52f62d4b.ngrok.io/:149596:15) at nrWrapper (Unknown script code:1:16969)"

__proto__: Error

编辑网页正在 iframe

  <iframe 
      allow="accelerometer *; ambient-light-sensor *; autoplay *; camera *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; speaker *; usb *; vibrate *; vr *"
      sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts" 
      src="....">
  </iframe>

内使用

Answer 1

Edge 可能认为 window.open('', '_blank') 处的 '' url 位于不同的域中。参考： WHATWG 同源政策
尝试打开一个空白页。

Answer 2

如果我们移除 sandbox 属性，那么在 Edge 上新打开的页面中就可以设置 URL。

A.html

<iframe allow="accelerometer *; ambient-light-sensor *; autoplay *; camera *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; speaker *; usb *; vibrate *; vr *"
        src="B.html">
</iframe>

B.html

<input type="button" value="test" onclick="opennew()" />
<script>
    function opennew() {
        var _authTab = window.open('', '_blank');
        setTimeout(() => _authTab.location.href = 'https://stackoverflow.com/', 2000);
    }
</script>

从 doc 中，我们可以看到 sandbox 的许多值不受 Edge 支持。所以这可能是当我们使用带有 sandbox 属性的 iframe 时无法在 Edge 上设置 URL 的原因。