gpt4 book ai didi

javascript - 可以使用 ShadowDOM 更改窗口/选项卡标题

转载 作者:行者123 更新时间:2023-11-28 05:11:44 24 4
gpt4 key购买 nike

我正在设计 Chrome 扩展程序。我希望能够更改选项卡中显示的标题而不更改真实的 <title />标签。在后台脚本中,您可以将标题作为只读值进行访问。通常,您使用内容脚本并更改实际的 <title />标签。

我正在尝试使用 ShadowDOM,看看这是否是一个选择。这个想法是 ShadowDOM 以视觉方式显示,但不是真实 DOM 的一部分,不会影响真实页面。

但是,在我的测试中,我可以添加阴影 <head /><title />元素,但它们不会更改页面标题中显示的内容。我猜测这是设计使然,因为浏览器可能从真实的 dom 获取这些值,但我想检查以确定是否有办法显示“影子标题”?

给定:

<html lang="en">
<head>
<title>Shadow DOM Example</title>
<meta charset="UTF-8" />
<script>
window.addEventListener("load", function() {

/** Sanity check, change the content of a part of th body **/

let realHost = document.getElementById("shadowHost");
let hostShadow = realHost.createShadowRoot();

hostShadow.textContent = "Shadow overlay on the body";


/** Try Creating a Shadow in the Title **/

let realTitle = document.getElementsByTagName("head")[0].getElementsByTagName("title")[0];
let titleShadow = realTitle.createShadowRoot();

titleShadow.textContent = "Created in titleShadow";


/** Try Creating a Shadow in the Head, then add title **/

let realHead = document.getElementsByTagName("head")[0];
let headShadow = realHead.createShadowRoot();

shadowTitle = document.createElement("title");
shadowTitle.textContent = "Created in headShadow";

headShadow.appendChild(shadowTitle);


}, false);
</script>
</head>
<body>
<div id="shadowHost">
Original Text
</div>
</body>

我得到以下信息:

Example Output from this test

最佳答案

使用 Shadow DOM 的新标准化版本,您现在应该使用 attachShadow()而不是createShadowRoot() 。不幸的是,您无法将 Shadow DOM 附加到 <title>元素any more .

因此不建议使用它,因为它会在 Chrome 中引发错误。

此外,在 <title>规范中,UI 中仅使用文本内容作为文档标题,因此即使使用旧版本的 Shadow DOM 也无法工作。

关于javascript - 可以使用 ShadowDOM 更改窗口/选项卡标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41322657/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com