个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
vscode.previewHtml 被弃用，取而代之的是 Webview。我更新了我的 ahk extension for vscode使用这个新的 API。使用 hh.exe -decompile Docs AutoHotkey.chm 我得到了 AutoHotkey 主站点的本地网站版本。我想在第二列中显示一个上下文文档，以便您可以在编码时阅读它。所以我做了。我成功地加载了带有样式表的页面，但链接不起作用:我总是停留在同一页面上。
即使我可以更改它们的 href，我也无法转到另一个页面。尽管您可以在工具提示中读取 href 值，但每次单击链接时都没有任何反应。Docs 文件夹存储在扩展路径中，因此 localResourceRoots 应该没问题。
我注意到的一件奇怪的事情是，即使 enableScripts 设置为 true，似乎并不是所有的 js 代码都被执行，因为在 AutoHotkey 网站上，在 .chm 和每个使用 FF 打开的 .html 文件我可以看到侧边栏，但在 WebView 页面中看不到。
这是创建 WebView 的代码:
this.docsPanel = vscode.window.createWebviewPanel('ahk-offline-docs', 'Documentation', { viewColumn: vscode.ViewColumn.Two, preserveFocus: true }, {
enableScripts: true,
enableFindWidget: true,
enableCommandUris: true,
localResourceRoots: [vscode.Uri.file(path.join(this.docsDirectoryPath, 'docs//')).with({ scheme: 'vscode-resource' })]
});
this.docsPanel.onDidDispose((e) => {
this.isDocsPanelDisposed = true;
});
这是将页面加载到 WebView 的代码:
let url = vscode.Uri.file(path.join(this.docsDirectoryPath, 'docs/')).with({ scheme: 'vscode-resource' });
const dom = new JSDOM(data, { runScripts: "dangerously" });
const aTags = dom.window.document.getElementsByTagName('a');
const len = aTags.length;
const basePath = url.toString();
for (let i = 0; i < len; i++) {
const a = aTags[i];
if (!a.href.includes('about:blank')) {
const commentCommandUri = vscode.Uri.parse(`command:ahk.spy`);
a.href = basePath + a.href;
// a.removeAttribute('href');
// a.setAttribute('onclick', '{command:ahk.spy}');
}
}
let ser = dom.serialize();
this.docsPanel.webview.html = /*data/*ser*/ser.toString().replace('<head>', `<head>\n<base href="${url.toString()}/">`);
另一种想法是从页面启动 vscode.commands(因为 enableCommandUris)，但我不知道如何执行这种操作。
如果您需要/想要重现此问题，您只需克隆存储库，进入 improving-offline-docs 分支并打开文件 offline-docs-manager.ts ，方法是openTheDocsPanel()
有没有办法使用链接切换当前页面？我应该开发一个 postMessage 系统吗？或者我错过了某处的设置？还是有更好的方法？
提前致谢!
最佳答案
Webviews 无法导航到当前 webview 内的另一个页面。如果您的 webview 尝试这样做，您应该会看到一条消息，例如 prevented webview navigation在 webview 开发者工具中
有两种方法可以处理 webview 中的链接:
<a>链接到外部资源的元素——例如 https:或 mailto:链接——在大多数情况下应该有效。可能会有一些奇怪的边缘情况，如果您遇到其中之一，您可能会想使用 command uri 或 postMessage在你的主扩展源中触发一些 Action
如果您想更新 webview 内容本身，但由于某些原因无法在 webview 本身内执行此操作，请使用 command uri 或 postMessage在你的主扩展的源代码中调用一些函数来更新 webview 的 html
关于typescript - VS代码: How to enable links in a webpage in the Webview，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56820226/
26
4
0
我是 Mercurial 的新手，并且不知何故仍处于评估过程中，所以这四个概念对我来说有点困惑。有些被提到等同于 Git 的 Staging/Index 概念，有些甚至比 Git 的 Staging
关闭。这个问题需要更多focused .它目前不接受答案。 想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post . 6 个月前关闭。 Improve this ques
任何人都可以给我详细信息吗？ 例如？ #ID 是属性、特性、选择器还是 anchor ？ 默认属性和默认属性是不同的东西吗？ 这些都是标签还是元素？ 我们将对此说些什么 这个 ..... 还有这些
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 8 年前。 Improve this qu
我有一个由 Javascript 填充的下拉列表。 在决定加载时显示的默认值时，我意识到以下属性显示的值完全相同: innerText innerHTML label text textContent
我可以知道每个 Exec 之间有什么区别吗？ , ExecWait , ExecShell , nsExec::Exec , nsExec::ExecToLog, nsExec::ExecToStac
当您处于版本 1 和版本 2 之间时，您会如何维护您的软件？ 从我的角度来看，“补丁”、“修补程序”、“维护版本”、“服务包”等术语都很模糊，根据与您交谈的对象不同，定义也不同。 您如何称呼版本之间的
我刚刚发现在 ES6 中有一个新的数学方法:Math.trunc . 我在 MDN article 中阅读了它的描述。 , 听起来像使用 |0 . 此外，>0 , &-1 , ^0也做类似的事情(感谢
我想知道我的 StackPanel 所有项目的高度。 有什么区别: Height - 获取或设置元素的建议高度。 ActualHeight - 获取该元素的渲染高度。 (只读) ExtentHeigh
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。 关闭 9 年前。 Improve this
我对所有声称以某种方式阻止计算的内置 Mathematica 函数感到困惑:Unevaluated、Defer、Hold ，以及超过 6 个 Hold* 形式。 Mathematica 文档只是单独解
我什至不确定正确的术语，所以让我从我的目标开始:拥有一个简单的应用程序(“Data Doler”)，它只会将大量数据从文件读取到内存中，然后提供服务将该数据切片到名为“Data Lapper”的单个多
我刚刚开始在我的项目中使用 Elasticsearch，我想像 sql 关键字一样搜索 '喜欢%' 做。 谁能解释一下 之间的区别通配符 , 前缀 , 查询字符串和 正则表达式 ? 哪个可以搜索最好性
由于我对任何主流浏览器(Firefox、Chrome、Opera)都不太满意，而且我尝试过的不太受欢迎的浏览器(近十几种)都没有，所以我决定 DIY 并制作一个网页我想要最好的浏览器。 主要目标是让它
我知道如何使用 Python 解析页面。我的问题是哪种方法是所有解析技术中最快的，其他方法的速度有多快？ 我知道的解析技术有Xpath、DOM、BeautifulSoup，还有使用Python的fin
我试图从正在解析的命令行中找出哪个函数最适合将十进制、十六进制或八进制数转换为 int 最好——在不知道输入的情况下事先。 目标是使用一个函数来识别不同类型的输入并将其分配给它的整数 (int) 值，
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我们需要在我们的网站上显示酒吧、餐馆和剧院等各种场所的元信息(例如，地址、姓名)。 理想情况下，用户会输入地点名称以及邮政编码，我们会提供最接近的匹配项。 人们将哪些 API 用于类似的地理定位目的？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
我正在创建我的第一个 Web 应用程序，我真的很困惑应该使用什么技术。 我的应用程序需要看起来很严肃(像一个应用程序)，它不需要很多色彩缤纷的图形界面。它只需要一个工具栏、一个标签栏、一个拆分面板(最
我是一名优秀的程序员,十分优秀！