h5 使用原生JS获取富文本标签内容，并进行展示

弑天落羽

已于 2022-09-24 11:14:50 修改

阅读量3.3k

点赞数 1

分类专栏： JS css 文章标签： javascript 前端 html5

于 2022-02-11 13:48:57 首次发布

本文链接：https://blog.csdn.net/yangzixiansheng/article/details/122878734

版权

JS 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

初衷嵌入app的h5免责声明（动态更改）

1.cdn vue做了h5，后发生点击失效，及加载vuejs慢，页面不出来
2.只能用原生js写一个小html了，获取某个元素，并在元素里添加富文本标签

document.getElementById('message').insertAdjacentHTML("afterEnd",msg)，


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>Title</title>
    <style type="text/css">
body{
    margin: 0;
}
        .msg {
            position: relative;
            width: 100%;
            /* height: 200px; */
            background-color: white;
            border-radius: 4px;
            /*position: absolute;*/
            left: 0;
            right: 0;
            top: 0;
            /* padding-top: 20px; */
            text-align: center;
            /*margin: 20% 6%;*/
            /*z-index: 999;*/
            /*display: none;*/
        }
    </style>
</head>
<body>
 <div id="app">
     <!--点击遮罩层-->
     <div  class="msg" >

             <div style="position: fixed;width:100%;height: 40px; line-height: 40px; text-align: center; top: 0;background: white">免责声明</div>
             <div style="padding:40px 8px 70px;overflow: auto">


             <div id="message"></div>

             </div>


        <div style="position: fixed;bottom:0;height: auto;width: 100%">
            <div  style="text-align: left;background: white;" onclick="clickCheckbox()">
                <input type="checkbox" id="check1"/>
                <span  class="checkSpan">I have read and agree to this disclaimer</span>
            </div>
            <div style="justify-content: center;align-items: center;background: white;width: 100%;display: flex;border-top: 1px solid #eee;">
                <input type="button" style='flex: 1;height: 50px;line-height:50px' onclick="cancel()" value="取消" />
                <input type="button" style="flex: 1;height: 50px;line-height:50px"  onclick="sure()" value="确定"/>
            </div>
        </div>
     </div>

 </div>
</body>
<script>
    var msg='<div><p style="font-size:12pt; line-height:115%; margin:0pt"><span style="font-family:宋体; font-size:12pt">为了尽可以及用户是否按照正常流程操作。</span></p><p style="font-size:12pt; line-height:115%; margin:0pt"><span style="font-family:宋体; font-size:12pt">我司对本条款持最终解释权。</span></p><p style="font-size:10.5pt; line-height:115%; margin:0pt 0pt 10pt; orphans:0; text-align:justify; widows:0"><span style="font-family:Calibri; font-size:10.5pt">&#xa0;</span></p></div><div class="cnzz" style="display: none;">\n'

    window.onload=function () {
        document.getElementById('message').insertAdjacentHTML("afterEnd",msg)
    }
    function set_app(params) {
        console.log(params)
        if (/android/i.test(navigator.userAgent)) {
            try {
                window.android.set_app(params)
            } catch (e) {
                console.log(e)
            }
        } else if (/ios|iphone|ipod|pad/i.test(navigator.userAgent)) {
            try {
                window.webkit.messageHandlers.set_app.postMessage(params)
            } catch (e) {
                console.log(e)
            }
        }
    }
    function cancel(){
        document.getElementById('check1').checked=false
        this.set_app('0')
    }

    function clickCheckbox(){
        document.getElementById('check1').checked=true
        document.getElementsByClassName('checkSpan')[0].style.color = "black"
    }
     function sure(){
        var state=document.getElementById('check1').checked
               if(state){
                   this.set_app('1')
               }else {
                   document.getElementsByClassName('checkSpan')[0].style.color = "red"
               }
            }

</script>
</html>