美文网首页
项目里用window.open打开页面报错解决方案

项目里用window.open打开页面报错解决方案

作者: Sun____ | 来源:发表于2023-01-15 18:00 被阅读0次

    在项目开发中遇到这样一个问题,项目里用window.open打开了一个外链,但是外链界面无法显示,页面有一个报错的message提示。奇怪的是复制这个链接,直接在浏览器地址栏粘贴,然后回车就可以正常打开。。。
    后来换了一种方法解决了,整体思路就是创建一个a标签,a标签的href设置为此外链,然后插入到body里,执行a标签的点击事件,代码如下:

    const openWindow = (url) => {
          let a = document.createElement("a");
          a.setAttribute("href", url);
          a.setAttribute("target", "_blank");
          a.setAttribute("id", "ftm-link");
          a.setAttribute("rel", "noreferrer");
          document.body.appendChild(a);
          a.click();
          const aNode = document.getElementById("ftm-link");
          if (aNode) {
            document.body.removeChild(aNode);
          }
        }
    

    这种方法就可以正常打开外链了。
    后来又在网上看到一篇文章,是这么说的:

    问题原因:
    当点击访问页面中外链地址时,会产生一个http请求(用于获取外链地址内容),此时出于安全策略(一些用户信息或登录信息会通过url传递),浏览器会在请求头中添加一个referrer,用来表示当前请求是从哪个页面跳转来的,也就是访问来源。当外链网站对访问做判断时,于是会出现诸如403 Forbidden、The HTTP request is not acceptable for the requested resource.问题。

    解决方法:
    在项目的index.html的<head>中加入如下<meta>代码:
    // index.html
    <meta name="referrer" content="no-referrer" />

    相关文章

      网友评论

          本文标题:项目里用window.open打开页面报错解决方案

          本文链接:https://www.haomeiwen.com/subject/rayacdtx.html