《前端》同一浏览器之间链接跳转问题--在浏览器中使用指定浏览器打开指定网页

2024年2月11日 173次阅读 来源: bellediao

关键技术：

window.open()

javaScript-打开新窗口（window.open）

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

语法：
window.open([URL], [窗口名称], [参数字符串])

  • URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
  • 窗口名称：可选参数，被打开窗口的名称。

       1.该名称由字母、数字和下划线字符组成。
       2.”_top”、”_blank”、”_self”具有特殊意义的名称。
             _blank：在新窗口显示目标网页
            _self：在当前窗口显示目标网页
            _top：框架网页中在上部窗口中显示目标网页
      3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
      4.name 不能包含有空格。

  • 参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

 

解决方案：

如下提供了三种在浏览器中使用chrome浏览器打开指定网页的方案。

链接一二效果相同，一采用js的window.open()打开新网页，二采用HTML的<a>打开新网页。（也是重新打开另一个网页，但不是替换当前网页。）

链接三采用js的window.open()的方法重新打开新的对话窗口。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>origin Page</title>
</head>
<body>
    <p><a href="javascript:;" onclick="jumpPage();">window.open 打开新标签页</a> </p>
    <p><a href="http://www.w3school.com.cn" target="_blank">html方式 打开新标签页</a></p>
    <p><a href="javascript:;" onclick="openRequestedPopup();">window.open 打开新的浏览器窗口</a></p>
    <br>
    <script>
        // window.name = "origin";
        // function open_win() {
        //     window.open("http://www.w3school.com.cn")
        // }
        function jumpPage() {
            window.open("http://www.w3school.com.cn", 'hello');
        }
        var windowObjectReference;
        var strWindowFeatures = "width=1000,height=500,menubar=yes,location=yes,resizable=yes,scrollbars=true,status=true";
        function openRequestedPopup() {
            windowObjectReference = window.open("http://www.w3school.com.cn", "CNN_WindowName", strWindowFeatures);
            // windowObjectReference = window.open("./b.html", "B_page", strWindowFeatures);

            setTimeout(function () {
                //windowObjectReference.close(); // 我们页面中关闭 或进行其他操作 打开的 窗口页
                console.log(windowObjectReference.position); // 10s 后 在origin winodw 控制台 打印 B_page 视口对象中的position 成员
            }, 10000);
        }
    </script>
</body>
</html>

如何替换当前窗口？

待补充

    原文作者：bellediao
    原文地址: https://blog.csdn.net/bellediao/article/details/104683910
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞