IE11环境下Edge专属链接兼容问题及适配方案咨询

方案一：浏览器检测，动态展示适配链接 #

直接通过脚本判断用户当前浏览器，自动生成对应跳转链接，彻底避免用户选择困惑，也不会出现Edge下edge-browser:前缀超时的问题。代码逻辑简单，适合技术基础有限的场景：

// 检测是否为IE11
function isIE11() {
  return !!window.MSInputMethodContext && !!document.documentMode;
}

// 检测是否为Chromium内核Edge
function isEdgeChromium() {
  return navigator.userAgent.indexOf("Edg") !== -1;
}

// 页面加载完成后自动设置链接
window.onload = function() {
  const targetUrl = "http://google.co.uk/"; // 替换为你的目标站点
  const linkBtn = document.getElementById("site-access-btn");
  
  if (isIE11()) {
    linkBtn.href = `edge-browser:${targetUrl}`;
    linkBtn.textContent = "点击在Edge中打开站点";
  } else {
    linkBtn.href = targetUrl;
    linkBtn.textContent = "打开站点";
  }
};

页面中只需放置一个按钮/链接元素：

<a id="site-access-btn" href="#" style="padding: 8px 16px; background: #0078d4; color: white; text-decoration: none; border-radius: 4px;">加载中...</a>

额外补充：针对IE11下页面格式异常的问题，可在页面头部加一段仅IE11可见的提示，提前给用户明确指引：

<!-- 仅IE11显示提示 -->
<!--[if IE 11]>
<div style="padding: 10px; background: #ffcc00; text-align: center;">
  此站点不支持IE11，请点击下方按钮在Edge中打开
</div>
<![endif]-->

方案二：超时Fallback自动跳转 #

如果不想做浏览器检测，可尝试先打开edge-browser:链接，超时后自动降级到普通链接。但注意：Edge中点击会出现短暂加载超时提示，体验不如方案一流畅。

function openSiteWithFallback() {
  const targetUrl = "http://google.co.uk/";
  const edgeProtocolUrl = `edge-browser:${targetUrl}`;
  const startTime = Date.now();

  // 先尝试Edge协议链接
  window.location.href = edgeProtocolUrl;

  // 3秒超时后检查，若未跳转则用普通链接
  setTimeout(() => {
    if (Date.now() - startTime < 3500) { // 留500ms误差
      window.location.href = targetUrl;
    }
  }, 3000);
}

页面按钮绑定该函数：

<button onclick="openSiteWithFallback()" style="padding: 8px 16px; background: #0078d4; color: white; border: none; border-radius: 4px; cursor: pointer;">打开站点</button>

内容的提问来源于stack exchange，提问作者Zabrake