前端JS和ios之间交互方式示例前端JS和ios之间交互方式示例，JS调用OC:不带参数；JS调用OC:带参数；oc捕获

、
代码分享


<!DOCTYPE html>

<head>
    <title>JS交互OC</title>
    <meta charset="utf-8">
        </head>

<!--   CSS语法-->
<style type='text/css'>
    img{
        cursor:pointer;
    }
   </style>

<body>
    
    <h2 style="text-align:center">Welcome To You</h2>
    
    <!--        图片-->
    <p style="text-align:center"> <img src="https://upload.jianshu.io/users/upload_avatars/1708447/fe2c67e7-25f7-4e2e-a321-a5d517c124aa.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240"  id= "pictureId" width="128" height="128" align="middle" onclick="clickImage();" /> </p>
    
    <p style="text-align: center ;background-color: #e6b500"> 且行且珍惜_iOS </p>
    
    <p style="text-align:center"> <a href="https://www.jianshu.com/u/e15d1f644bea">简书主页</a> </p>
    
    <p style="text-align:center"> <a href="github://callName_?https://github.com/wsl2ls">Github主页</a> :通过截获URL调用OC</p>
    
    <p style="text-align:center"> <a href="http://www.chinadaily.com.cn">中国日报网 </a> </p>
    
    <p style="text-align:center"> <button id="btn1" type = "button" onclick = "jsToOcFunction1()" > JS调用OC:不带参数  </button> </p>
    
    <p style="text-align:center"> <button id="btn2" type = "button" onclick = "jsToOcFunction2()"> JS调用OC:带参数  </button> </p>
    
    <p style="text-align:center"> <button id="btn3" type = "button" onclick = "showAlert()" > oc捕获到html的弹出框  </button> </p>
    
    <!--        音频-->
    <p style="text-align:center"> <audio controls="controls" height="100" width="100">
        <source src="http://up.mcyt.net/?down/47548.mp3" type="audio/mp3" />
        <source src="http://up.mcyt.net/?down/47548.ogg" type="audio/ogg" />
        <embed height="100" width="100" src="http://up.mcyt.net/?down/47548.mp3" />
    </audio> </p>
    
    <!--         视频-->
    <p style="text-align:center"> <video width="320" height="240" controls="controls" preload="auto" poster="http://a.hiphotos.baidu.com/zhidao/pic/item/0d338744ebf81a4cd90f1d3ad72a6059252da600.jpg">
        <source src="http://baobab.kaiyanapp.com/api/v1/playUrl?vid=39183&editionType=normal&source=qcloud" type="video/mp4" />
        <source src="http://baobab.kaiyanapp.com/api/v1/playUrl?vid=39183&editionType=normal&source=qcloud" type="video/ogg" />
        <source src="http://baobab.wdjcdn.com/1455782903700jy" type="video/webm" />
        <object data="http://baobab.kaiyanapp.com/api/v1/playUrl?vid=39183&editionType=normal&source=qcloud" width="320" height="240">
            <embed src="http://baobab.kaiyanapp.com/api/v1/playUrl?vid=39183&editionType=normal&source=qcloud" width="320" height="240" />
        </object>
    </video> </p>
    
    <!--        JS语法-->
    <script type = "text/javascript">
        
    function jsToOcFunction1()
    {
       window.webkit.messageHandlers.jsToOcNoPrams.postMessage({});
    }
    
    function jsToOcFunction2()
    {
        window.webkit.messageHandlers.jsToOcWithPrams.postMessage({"params":"我是参数"});
    }
    
    function showAlert()
    {
        alert("被OC截获到了");
    }
    
    //图片点击事件
    function clickImage()
    {
        alert("欢迎你关注我！点击了图片");
    }
    
    //OC调用JS改变背景色
    function changeColor(parameter)
    {
        document.body.style.backgroundColor = randomColor();
	     alert(parameter);
    }
    
    //随机生成颜色
    function randomColor()
    {
        var r=Math.floor(Math.random()*256);
        var g=Math.floor(Math.random()*256);
        var b=Math.floor(Math.random()*256);
        return "rgb("+r+','+g+','+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
    }
    
    // 切换图片
    function changePicture(id, path) {
        var image = document.getElementById(id);
        image.src = path;
    }
    
    </script>
    
</body>

</html>