问题描述
<script src="https://cdn.jsdelivr.net/npm/@authing/native-js-ui-components"></script>
<!-- CSS 文件 -->
<link href="https://cdn.jsdelivr.net/npm/@authing/native-js-ui-components/lib/index.min.css" rel="stylesheet"></link>
<script>
var guard = new AuthingNativeJsUIComponents.AuthingGuard("xxxxxxx");
guard.show();
// 事件监听
guard.on("load", (authClient) => console.log(authClient));
</script>
出错提示
native-js-ui-components:2 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
at Function.value (native-js-ui-components:2:2627237)
at e.value (native-js-ui-components:2:2626785)
at new e (native-js-ui-components:2:2626206)
解决办法
Guard 的 script 不能放到 head 中，应该放到 body 下
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- native CDN -->
<script src="https://cdn.jsdelivr.net/npm/@authing/native-js-ui-components"></script>
<!-- CSS 文件 -->
<link href="https://cdn.jsdelivr.net/npm/@authing/native-js-ui-components/lib/index.min.css" rel="stylesheet">
</link>
</head>
<body>
<script>
var guard = new AuthingNativeJsUIComponents.AuthingGuard("xxxxxxx");
guard.show();
guard.on("load", (authClient) => console.log(authClient));
</script>
</body>
</html>
文档链接
https://docs.authing.cn/v2/reference/guard/native-javascript.html#直接用-script-引入