原生js动态注入脚本内容

JavaScript04

原生js动态注入脚本内容,第1张

export  const createScript = (result,type,pos) =>{

        var positions = pos? document.getElementsByTagName('head')[0] :document.getElementsByTagName('body')[0]

        var script = document.createElement('script')

        script.type = 'text/javascript'

        if (type === 'url') {

            script.src = result

        } else {            

            script.innerHTML = result

        }

        positions.appendChild(script)

    }

let scriptCode = `

            function fns(){

                alert("原生js动态注入脚本内容")

            }

            fns()

createScript(scriptCode)          

有三种方法可以实现,分别如下:

第一种、直接document.write:

<script language="javascript">

document.write("<script src='test.js'><\/script>")

</script>

第二种、动态改变已有script的src属性

<script src='' id="s1"></script>

<script language="javascript">

s1.src="test.js"

</script>

第三种、动态创建script元素:

<script>

var oHead = document.getElementsByTagName('HEAD').item(0)

var oScript= document.createElement("script")

oScript.type = "text/javascript"

oScript.src="test.js"

oHead.appendChild( oScript)

</script>

注意:第三种方法使用时,请注意路径。

由于UIWebview即将废弃,相比较于WKWebview,通过测试即可发现UIWebview占用更多内存,且内存很夸张。WKWebView网页加载速度也有提升,但是并不像内存那样提升那么多。下面列举一些其它的优势:

WKScriptMessageHandler是因为我们要处理JS调用OC方法的请求。

WKScriptMessage有两个关键属性name 和 body。

因为我们给每一个OC 方法取了一个name,那么我们就可以根据name 来区分执行不同的方法。body 中存着JS 要给OC 传的参数。

ocAddAction方法在js文件中并没有定义

实现WKNavigationDelegate协议方法,执行之后会在WKScriptMessageHandler代理方法中拦截到 ocZRAction

动态修改alert系统函数的实现,当js中调用alert函数时,触发的是我们自定义方法

URL Scheme拦截的问题,这里不做赘述,请看 demo

JS注入详情

参考链接:

链接一

链接二