一篇文章理解什么是JS Bridge

本文链接：https://blog.csdn.net/superherooooss/article/details/129731142

JS Bridge解释

JS无法直接调用native API

需要通过一些特定的 “格式” 来调用

这些 “格式” 就统称为 JS Bridge，例如微信JS-SDK

如图所示

javascript 网页开发中进行一些api调用

JSBridge 进行一些封装

Native 提供一些执行能力

常见实现方式

注册全局API (不适用于异步的情况)

URL Scheme (适用于所有情况)

<!DOCTYPE html>
<htmllang="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>
</head>
<body>
    <p>JS Bridge</p>

    <script>
        // 封装JS-Bridge
        const sdk= { 
            invaoke(url,data={},onSuccess,onError){
                const iframe=document.createElement('iframe')
                iframe.style.visibility='hidden';
                document.body.appendChild(iframe);
                iframe.onload= ()=>{
                    const content = iframe.contentWindow.document.body.innerHTML
                    onSuccess(JSON.parse(content))
                    iframe.remove()
                }
                iframe.onError=()=>{
                    onError()
                    iframe.remove()
                }
                iframe.src=`my-app-name://${url}?data=${JSON.stringify(data)}`
            },
            fn1(data,onSuccess,onError){
                this.invaoke('api/fn1',data,onSuccess,onError)
            }
        }
    </script>
</body>
</html>