V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
imjeen
V2EX  ›  Android

打开一个 HTML5 页面,往 Webview 注入一段 JsBridge 的时机?

  •  
  •   imjeen · 2017-07-23 12:39:56 +08:00 · 13999 次点击
    这是一个创建于 2678 天前的主题,其中的信息可能已经有所发展或是发生改变。

    JsBridge 是一些声明的 js 语句和自定义事件,通过客户端来注入然后触发 js 里的自定义事件,来告知 H5 页面注入完毕。

    (以 android 说明)加载一个网页的方式: webView.loadUrl("http://www.google.com/")。

    现状与问题:

    onPageFinished 回调里才注入 JsBridge 并触发事件。

    onPageFinished 可看作页面 load 完(即页面有 load 事件),但这样如果页面有太多的资源(外部样式、图片等),可又不通过 js 动态处理的话,岂不是打开一个 webview,js 与 app 交互要等到 load 完才可以进行。

    更希望在页面 DOMContentLoaded后就可以进行交互。即提前注入 JsBridge 的声明。

    设想与目的:

    因为不太懂 app 开发,有以下设想:

    JsBridge 里有原生 DOMContentLoadedload 事件等的声明,只要提前注入页面,页面在加载过程中就会触发对应的事件,从而可以提前与 app 交互( DOMContentLoaded 后)。所以 webView.loadUrl 的时候,app 往页面的 head 里插入这段 JsBridge 声明就可以。

    可问题是以怎样的时机注入 JsBridge:

    • ~~onPageFinished 时机:整个页面 load 完,才能交互,太迟了~~ (目前方案,但 load 后太迟)
    • onPageStarted 时机?: 貌似不行,页面加载前,无法注入 (客户端尝试了确实不可)
    • onReceivedTitle 时机?:webvieview 获得 ttile 说明可以往 head 注入 js (待尝试)

    一般情况,前端页面只需要监听 DOMContentLoaded 事件就可以,但这样要涉及到与 app 的交互,而且 JsBridge 由 app 注入,所以这里需要 app 有 DOMContentLoaded 这样一个时机来告知前端页面页面已经解析完,并且可以交互。所以这样可以做到吗?或者有什么更好的方案?

    涉事不深,望各位前辈多多指教。

    (描述有点长,主要想让问题更详细一点。不过这里先感谢各位花时间看我的问题啦~)

    6 条回复    2018-07-04 15:01:58 +08:00
    veightz
        1
    veightz  
       2017-07-23 17:36:40 +08:00
    安卓不太熟,印象中代理的回调方法里有个类似于 shouldLoad 的方法,可以对你自己定义的 jsbridge url 进行拦截。
    vjnjc
        2
    vjnjc  
       2017-07-24 11:39:19 +08:00
    我好像也是 onPageFinished 注入的,当时没考虑太慢的问题。。。
    要不在 onPageStarted 起一个延迟 0.5s 的 runner ?(没试过~
    marvinwilliam
        3
    marvinwilliam  
       2017-07-24 15:16:58 +08:00
    什么样的需求需要 jsbridge 立刻生效的?

    为啥 jsbridge 是需要外部注入的?你们的页面不是自己的么?
    030
        4
    030  
       2017-07-24 17:04:35 +08:00 via Android
    不知 finished 调用,dom 没加载完你就要操作 dom 吗,不是的话随便玩。
    imjeen
        5
    imjeen  
    OP
       2017-07-24 22:11:50 +08:00 via Android
    从 Web 来看,只需要 Dom 加载和解析完(即触发 DOMContentLoaded 事件),此时就可以做这些初始化和操作一些 Dom。
    而 onPageFinished 的回调的时间是页面加载完(即触发 load 事件),包括图片、样式等外部资源加载完。

    举个例子,如果页面包含大量图片而且加载缓慢。你有没有对这些资源做优化处理,那么等到 onPageFinished 触发的时间比较久。
    XiongXionXio
        6
    XiongXionXio  
       2018-07-04 15:01:58 +08:00
    那这个问题最后的解决方案是怎样的啊?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1756 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 00:00 · PVG 08:00 · LAX 16:00 · JFK 19:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.