关于 js 原生框架调用出错的解决办法

答疑解惑 常见 FAQ
1

问题描述


<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-引入