React Ant design 中新开一个新的浏览器标签页window.open

最新推荐文章于 2023-09-04 09:53:30 发布
最新推荐文章于 2023-09-04 09:53:30 发布
阅读量1.9k 收藏
点赞数
分类专栏： 前端 window.open react 文章标签： html vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/runrun117/article/details/120077096
版权
前端 同时被 3 个专栏收录
66 篇文章 0 订阅
订阅专栏
react
2 篇文章 0 订阅
订阅专栏
window.open
1 篇文章 0 订阅
订阅专栏 
window.open（'新的标签页的内容'）

如果直接写www.baidu.com的话，会出错，会在原有的路由路径中拼接上新的url

如果浏览器中url显示http://172.16.3.111:8000/chat/chatBot/index

在使用window.open('www.baidu.com')后，新开的页面url为：http://172.16.3.111:8000/chat/chatBot/www.baidu.com

这个显然不是想要的，需要使用在url中http的头

所以需要使用

window.open('http://www.baidu.com');

这样就可以正在新标签页面中正常使用了。

runrun117
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Ant Design Pro 二】 创建页面，组件，并在页面调用
a_靖的博客
01-09 8212
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 路由里面的参数作用介绍： { path: "/a_nowdayserver/nowdayserver", //随便取名，显示在访问路径url中，如果是子路由，需要和父路径匹配 icon: "file", //菜单栏显示的图标 name: "你好", //菜单栏显示的标题 comp...
为ant-design pro添加导航条并添加新页面
qq_45736175的博客
05-31 1292
1.找到如下的目录，点击修改文件 我选择把新的导航条插在第一行，选择在如下位置插入 // new { path: '/new', name: 'new', icon: 'user', routes: [ { path: '/new/analysis', name: 'analysis', component: './dashboard/analysis',
ant design列表页，转跳到详情页，携带参数
shunzizhan
08-08 1万+
在列表页中，需要查看某条数据的详情，点击查看，然后进入详情页，详情页获取参数，并根据参数请求接口数据。 路由配置 '/equipment/list': { component: dynamicWrapper(app, ['equip'], () => import('../page/Equipment/List')), }, '/equ...
ant design pro 跳转新页面 修改功能
斑斓 小星愿的博客
11-04 6160
ant design pro 修改功能跳转新页面背景例子页面跳转 背景 在官方提供的例子中 是以弹窗的形式做的修改和新增，在项目中如果遇到 采集项数较多，会在修改页面添加别的功能的情况下 弹窗满足不了此需求了。 例子 页面跳转 先说修改页面吧， 需要在路由配置此页面路由，修改页面会带着此条数据中的唯一标识id。 // 这是列表页的路由配置 { path: '/pages/data-tab...
【Ant Design】新增页面非常简单，只需要四步即可
zcrazy的博客
03-04 2756
上一篇文章主要是讲如何修改布局，这一篇主要是如何新增加一个页面。 首先修改完了布局之后，我的页面变成了下面所示 这一篇主要是要达成图里面“我的新增页面”里面的效果，里面包含的知识点主要有以下内容： 1.增加两个页面 2.在一个页面中增加一个子页，子页中再增加一个子页 3.国际化 首先先是增加一个页面，只需要在config文件夹里面的config.js添加几行代码就行 1.先找到config.js 2.打开config.js之后，用Ctrl+F寻找dashboa...
ant-design-vue 之Tabs 标签页
热门推荐
不想起床
01-09 1万+
基本代码 <template> <div> <a-tabs defaultActiveKey="1" @change="callback"> <a-tab-pane tab="Tab 1" key="1">Content of Tab Pane 1</a-tab-pane> <a-tab-pane tab="Ta...
Ant-Design-Pro-V5：实现打开页面多页签切换
hyupeng1006的博客
09-04 1198
项目中打开多个页面，可使用多页签切换，相互切换时并保留各页面的状态
antd 框架：点击链接重开浏览器页面——基础积累
yehaocheng520的博客
06-20 1089
antd 框架：点击链接重开浏览器页面——基础积累
react跳转页面并且打开弹窗
博客
02-02 1391
react实现页面跳转并且打开跳转后页面的弹窗
antdesign vue 打开页面并跳转一个新窗口
艾米的猫儿的博客
04-24 630
antdesign vue 打开页面并跳转一个新窗口
react-tabs:极其简单灵活的标签页
05-19
React标签 极其简单灵活的标签页 正在安装 npm i @starnavi/react-tabs 或者 yarn add @starnavi/react-tabs 基本范例 import { Tab , Tabs , TabList , TabPanels , TabPanel } from '@starnavi/react-tabs' ; export default ( ) => ( < Tabs> < TabList> < Tab> First Tab < / Tab > < Tab> Second Tab < / Tab > < / TabList > < TabPanels> < TabPanel> < h2> First Tab Content < / h2 > <
react-new-window:using使用`window.open`在React中弹出新窗口
05-07
受到（ 启发。 特征 仅2.68KB （已压缩！）。 支持完整的window.open api 。... 装入<NewWindow>将打开一个弹出窗口。 卸载后，弹出窗口将关闭。 children内容将呈现到新的弹出窗口中。 在这种情况下， Hi
window.open打开窗口被拦截的快速解决方法
12-11
自己遇到的使用window.open打开新窗口被拦截的几种情况（使用的chrome浏览器，其他浏览器未测）： 第一次：window.open(www.jb51.net),打开了新窗口，但是页面并没有加载出来，需要回车才能出来 解决方法：页面地址...
react-ant：（基于pro 2.0）基于Ant Design Pro的（多标签页标签，拖拽，富文本，拾色器，多功能表，多选选择）
02-06
Ant Tabs Pro（多标签tabs） 开箱即用的中台前端/设计解决方案。 特性 :gem_stone:优雅美观：基于Ant Design架构精心设计 :triangular_ruler:常见设计模式：提炼自中后台应用的典型页面和场景 :rocket:最新技术栈...
react-antd-landing-page:使用React和Ant Design制作的登录页面
05-28
React Ant设计登陆页面 我尝试使用React和Ant Design重新创建引导登录页面。 您可以在查看现场演示。 原始设计属于 。
react ant Design手动设置表单的值操作
01-22
1.设置表单的值 this.props.form.setFieldsValue({ name:”张三”, }); 2.清空表单的值 this.props.form.resetFields(); 3.获取某一输入框的值 ...this.props.form.getFieldValue(...2、在state里定义一个
antd源码分析之——标签页（tabs 2.Tabs关键组件功能实现）
weixin_30786657的博客
09-11 1722
由于ant Tabs组件结构较复杂，共分三部分叙述，本文为目录中第二部分（高亮） 目录 一、组件结构 antd代码结构 rc-ant代码结构 1、组件树状结构 2、Context使用说明 3、rc-tabs中只在example、test中使用的组件说明 二、Tabs关键组件功能实现 1、Tabs（antd） 2、RcTabs 3、Sentinel哨兵 4、InkT...
关于Ant Design Vue的 Tabs 标签页默认打开页面缓存问题
ws271的博客
11-15 1万+
关于Ant Design Vue的 Tabs 标签页默认打开页面缓存问题问题描述存在缓存代码 问题描述 设置默认打开的标签页为key=1（第一个），如果关闭的时候是key=3（第三个标签页），再次打开的时候还是第三页，应该为设置的默认页面（key=1） 存在缓存代码 ...
基于antdPro5的标签页面打开方式
ybfan
10-14 1635
效果图: 目前react\vue\angular都是单页面的实现路由跳转方式 但因为平台是后台管理系统,业务方想实现浏览器标签页切换的方式进行配置,以前多页面是采用iframe实现,页面性能大大降低,多页面本来就是很鸡肋的方式,奈何人在屋檐下,不得不低头 首先实现要实现一个组件来管理路由吧,可以这么理解,如图的路径 1、TagView的index.jsx,index.less import React, { useState, useEffect, useRef } from '...
React 怎么接 window.open 的url参数
最新发布
03-21
在React中，可以通过使用`window.open`方法来打开一个新的浏览器窗口，并传递URL参数。下面是一种常见的实现方式： 1. 首先，在React组件中定义一个处理点击事件的函数，例如`handleOpenWindow`： ```jsx handleOpenWindow = () => { const url = "https://www.example.com"; // 设置要打开的URL const params = "?param1=value1&param2=value2"; // 设置URL参数 const fullUrl = url + params; // 拼接完整的URL window.open(fullUrl); // 使用window.open打开新窗口 } ``` 2. 在组件的render方法中，将该函数与一个按钮或其他元素的点击事件绑定： ```jsx render() { return ( <div> <button onClick={this.handleOpenWindow}>打开新窗口</button> </div> ); } ``` 这样，当用户点击按钮时，`handleOpenWindow`函数会被调用，打开一个新的浏览器窗口，并传递URL参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值