首页 > 其他分享 >如何在VSCode Webview中打开一个新的页面

如何在VSCode Webview中打开一个新的页面

时间:2023-05-09 19:23:07浏览次数:44  
标签:www VSCode Command Webview 打开 页面

  上一篇我介绍了如何在VSCode Webview中实现点击链接下载图片或文件,本文介绍如何在默认浏览器中打开一个新的页面。

  在浏览器中,如果要实现打开一个新的页面有许多种不同的方法,例如:

window.open("https://www.cnblogs.com/jaxu", "_blank");

  或者直接在页面上放一个<a>标签:<a href="https://www.cnblogs.com/jaxu" target="_blank">点我</a>。当然这个标签也可以是动态生成的:

let a= document.createElement('a');
a.target= '_blank';
a.href= "https://www.cnblogs.com/jaxu";
a.click();

  但是这些方法在VSCode Webview中依然不工作,查看Developer Tools中的Console,会看到一行诸如"Blocked opening 'https://www.cnblogs.com/jaxu' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set."的错误。看样子需要在Webview生成的iframe中添加allow-popups属性许可。我简单查了一下相关文档,对于如何添加allow-popups并没有比较具体的说明(如果有小伙伴找到了也可以在评论区中告知,多谢!)。

  参照我们在上一篇中的办法,打开一个新页面可以通过VSCode内置的Command openExternal在Server端来实现:

await vscode.env.openExternal(vscode.Uri.parse(sUrl));

  Client端可以通过响应标签的onclick事件直接调用Server端暴露出来的API来打开一个新的页面。只不过默认情况下VScode会弹出一个提示:

  点击Configure Trusted Domains可以将要打开的页面的domain保存起来,这样下次就不会再出提示了。

  Trusted Domains可以在VSCode的命令面板(Ctrl + Shift + P)中输入Manage Trusted Domains打开。该设置项貌似不是单独存放在一个配置文件中,而且好像也不能通过代码进行预先设置。感兴趣的同学可以查看下面这个文件:

  在VSCode的Webview中,有许多行为是受限制的,我猜这些限制也是出于安全方面的考虑。如果发现通过常规的方法无法实现所要的功能,那么可以查看一下VSCode内置的Command,看看有没有哪个Command提供了相同的功能。

 

标签:www,VSCode,Command,Webview,打开,页面
From: https://www.cnblogs.com/jaxu/p/17385999.html

相关文章

  • VsCode安装教程
    1、下载链接。https://code.visualstudio.com/以下红色箭头任意点一个即可,(stable为稳定线上版本,insders为测试版本,会有一些新功能,但不稳定),我们选stable 2、下载完成后双击解压免安装的,直接打开即可,不可删除(可复制到安全的文件夹下面)3、安装语言包,点击1,搜索Chinese,点击安装(目......
  • 【HarmonyOS】轻量级智能穿戴应用如何在页面中实现数据传递与全局变量的使用
    【关键词】轻量级智能穿戴、LiteWearable、数据传递、全局变量 【问题描述】开发轻量级智能穿戴LiteWearable应用,在app.js中定义全局变量,在页面中通过this.$app.$def.xxx获取时,报错TypeError:Cannotreadproperty'$def'ofundefined 【问题分析】经确认,LiteWearable......
  • 做了个vscode 小插件,用于修改window 的颜色以区分同时打开的不同工作区,快用起来吧!
    Coralizemarketplace/coralize以高效且便捷的方式自定义VisualStudioCode工作区窗口的状态栏、标题栏以及活动边栏等颜色!这将对那些需要同时打开多个vscode窗口/工作区的人非常有用。Coralize提供了一系列中国传统文化色彩,并搭配友好的用户界面。Customizethecolorscheme......
  • vue3 路由页面返回时,恢复滚动条位置
    首先,路由必须是KeepAlive模式<scriptsetuplang="ts">import{onActivated}from"vue";import{onBeforeRouteLeave}from"vue-router";import{ref}from"vue"constscrollRef=ref(<HTMLElement><unknow......
  • 记录--极致舒适的Vue页面保活方案
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助为了让页面保活更加稳定,你们是怎么做的?我用一行配置实现了Vue页面保活是指在用户离开当前页面后,可以在返回时恢复上一次浏览页面的状态。这种技术可以让用户享受更加流畅自然的浏览体验,而不会被繁琐的操作打扰......
  • 微信小程序实现类似elementUI的Timeline时间线效果,自适应页面与文本
    <viewclass="box"><viewwx:for="{{list}}"wx:key="index"class="one"><viewclass="onedot"></view><viewwx:if="{{index!=list.length-1}}"class="oneline......
  • VScode代码自动补全提示
    VScode代码自动补全提示1.打开设置2.搜索Suggest:SnippetsPreventQuickSuggestions,去掉勾选。3.Ctrl+Shift+P打开setting.json文件,添加以下代码//vscode不自动补全添加代码"editor.suggest.snippetsPreventQuickSuggestions":false,"editor.quickSugg......
  • VsCode设置插件安装目录
    VsCode设置插件安装目录如果是还没有安装插件,希望把新的插件安装到新目录,可以使用【命令行/快捷方式/资源管理器右键】的方式来打开vscode如果之前已经安装过插件,可以把C:\Users\xxxx\.vscode下的extensions目录拷贝到插件需要安装的路径下,再进行下面的操作命令行方式可以......
  • uniapp app端内嵌webview对接支付宝支付
    //app支付constappRequestPayment=(orderInfo:string)=>{uni.navigateTo({url:'跳转的路径?one='+encodeURIComponent(JSON.stringify(orderInfo))})}ViewCode<viewclass="page"><web-view:src="state.navU......
  • ZK----第七章 ZUML页面及XUL组件集
    基本组件Label组件:89用来显示一段文字<labelvalue=”hello”/>属性:pre、hyphen、maxlength、multiline  按钮组件:90两种:button和toolbarbutton属性: Label:名称、image:按钮显示的图像、(dir:控制label和image的显示位置,orient:控制布局为横向或纵向)<button label=”left”ima......