gpt4 book ai didi

javascript - 向 youtube 添加元素

转载 作者:行者123 更新时间:2023-12-04 17:17:04 26 4
gpt4 key购买 nike

我正在尝试将此自定义元素添加到 YouTube。

一开始,我在控制台写:

const script1 = document.createElement("script")
script1.type = "module"
script1.src = "https://unpkg.com/pose-viewer@0.0.4/dist/pose-viewer/pose-viewer.esm.js"
document.head.appendChild(script1)

然后:

document.createElement('pose-viewer')

但是我得到了这个错误:

Uncaught TypeError: Class constructor a cannot be invoked without'new'at new g (custom-elements-es5-adapter.js:11)at :1:10

所以我编译成es5:

const script1 = document.createElement("script")
script1.src = "https://unpkg.com/pose-viewer@0.1.2/dist/pose-viewer/pose-viewer.js"
document.head.appendChild(script1)

但是我得到了这个错误:

Uncaught TypeError: Illegal invocationat n.f (pose-viewer.js:15)at Function.getOwnPropertyDescriptor (pose-viewer.js:15)at pose-viewer.js:44at pose-viewer.js:58at pose-viewer.js:130

我做错了什么?为什么这不适用于 YouTube,但在其他任何地方都有效?

最佳答案

如果您查看 https://unpkg.com/pose-viewer@0.1.2/dist/pose-viewer/pose-viewer.js 的来源你会看到它被转换为 ES5,但是自定义元素应该在 ES6 中定义,例如:

class MyElement extends HtmlElement {}

此处有关适配器的更多信息:

https://www.npmjs.com/package/@webcomponents/webcomponentsjs#custom-elements-es5-adapterjs

您只需要按照错误消息并将其添加到您的 html 中,然后再运行您的脚本:

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.5.0/custom-elements-es5-adapter.js"></script>

更新

如果您使用的是 esm 脚本,则不需要适配器,因为该脚本使用的是 es6 语法。

您可以将脚本作为模块加载:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>pose viewer example</title>
</head>
<body>
<script src="https://unpkg.com/pose-viewer@latest/dist/pose-viewer/pose-viewer.esm.js" type="module"></script>
<pose-viewer></pose-viewer>
</body>
</html>

或者如果你想从另一个js脚本导入它你只需要添加一个import语句

html 可能看起来像这样:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>pose viewer example</title>
</head>
<body>
<script src="./index.js" type="module"></script>
</body>
</html>

脚本是这样的:

  import "https://unpkg.com/pose-viewer@latest/dist/pose-viewer/pose-viewer.esm.js";
const x = document.createElement('pose-viewer');
document.body.appendChild(x);

更新

要通过控制台将其加载到 youtube 网站,您需要使用新的运算符,使用 esm 模块,加载部分如下所示

 const script = document.createElement('script')
script.setAttribute('type', 'module');
script.setAttribute('src', 'https://unpkg.com/pose-viewer@0.0.4/dist/pose-viewer/pose-viewer.esm.js' );
document.body.appendChild(script);

然后从 customElement 注册表中获取类并使用 new 调用它:

 const PoseViewer = customElements.get('pose-viewer');
new PoseViewer();

关于javascript - 向 youtube 添加元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68457054/

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