向 youtube 添加元素
Adding element to youtube
我正在尝试将此自定义元素添加到 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 invocation
at n.f (pose-viewer.js:15)
at Function.getOwnPropertyDescriptor (pose-viewer.js:15)
at pose-viewer.js:44
at pose-viewer.js:58
at 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 注册表中获取 class 并使用 new
:
调用它
const PoseViewer = customElements.get('pose-viewer');
new PoseViewer();
我正在尝试将此自定义元素添加到 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 invocation at n.f (pose-viewer.js:15) at Function.getOwnPropertyDescriptor (pose-viewer.js:15) at pose-viewer.js:44 at pose-viewer.js:58 at 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 注册表中获取 class 并使用 new
:
const PoseViewer = customElements.get('pose-viewer');
new PoseViewer();