从后台获取的数据中有HTML代码,其中的图片显示不适配手机屏幕:
现象:
看api解决方案:
1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> 7 <title>APICloud APP</title> 8 <link rel="stylesheet" type="text/css" href="../css/api.css" /> 9 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 10 </head> 11 12 <body> 13 <section class="wid_95"> 14 <div id="text_title" class="discuss_title"></div> 15 <ul class="discuss_wrap"> 16 <li class="update_time" id="update_time"></li> 17 <li class="clicks" id="clicks"></li> 18 </ul> 19 <div id="text_content" class="text_content"></div> 20 </section> 21 <div class="h10"></div> 22 <div class="hot_bursting_title fon_16">评论</div> 23 <section id="content"> 24 <div class="touxiang_w" id="user_headimg"> 25 <!-- <img src="http://xxxx.XXXXX.cn/uploads/20171229/3b8d734e0d6c3bfb6e48f2538cbee6fa.jpg" class="touxiang"/> --> 26 </div> 27 <ul class="wid_90 discuss_user"> 28 29 <li class="fram2_left" id="user_nickname"> 30 <!-- <p>lala</p> --> 31 </li> 32 <li class="fram2_right">2</li> 33 </ul> 34 <div class=" wid_90 discuss_user1">111111111111</div> 35 36 </section> 37 38 39 </body> 40 <script type="text/javascript" src="../script/api.js"></script> 41 42 <script type="text/javascript" src="../script/carbagbag.js"></script> 43 44 <script type="text/javascript" src="../script/jquery.min.js"></script> 45 46 <script type="text/javascript"> 47 apiready = function() { 48 49 api.ajax({ 50 url: 'http://xxxx.XXXXXX.cn/index/Carcircle/detail', 51 method: 'post', 52 data: { 53 values: { 54 car_circle_id: api.pageParam.wareId 55 }, 56 } 57 }, function(ret, err) { 58 if (ret) { 59 60 var text_title = ret.data.text_title; 61 $api.byId('text_title').innerHTML = text_title; 62 63 var update_time = ret.data.update_time; 64 65 66 $api.byId('update_time').innerHTML = update_time; 67 68 //评论 69 var clicks = ret.data.clicks; 70 $api.byId('clicks').innerHTML = clicks; 71 //内容 72 var text_content = ret.data.text_content; 73 $api.byId('text_content').innerHTML = text_content; 74 //获取内容中img标签,设置宽度为屏幕宽度 75 var el = $api.byId('text_content'); 76 var img = $api.domAll(el, 'img'); 77 for (var i = 0; i < img.length; i++) { 78 console.log(JSON.stringify(img[i])); 79 var winWidth = api.winWidth; 80 $api.attr(img[i], 'width', winWidth-20); 81 } 82 83 84 } else { 85 alert(JSON.stringify(err)); 86 } 87 }); 88 api.ajax({ 89 url: 'http://xxxx.XXXXX.cn/index/Carcircle/detail_comment', 90 method: 'post', 91 data: { 92 values: { 93 car_circle_id: api.pageParam.wareId, 94 page: 1 95 }, 96 } 97 }, function(ret, err) { 98 if (ret) { 99 //console.log(JSON.stringify($api.getStorage('nickname1'))); 100 $api.byId('user_nickname').innerHTML = user_nickname; 101 102 103 //console.log(JSON.stringify(ret)); 104 var detail_comment = ret.data; 105 var detail_comment_html = ''; 106 107 108 for (var i = 0; i < detail_comment.length; i++) { 109 110 detail_comment_html += 111 '<div class="wid_95 discuss_user_w"><img class="touxiang" src="' + detail_comment[i].user_headimg + '"/>' + '<div class="discuss_user_wrap"><ul class="discuss_user"><li class="fram2_left">' + detail_comment[i].user_nickname + 112 '</li><li class="fram2_right">' + detail_comment[i].create_time.substring(5, 10) + '</li></ul><div class="discuss_user1">' + detail_comment[i].content + '</div></div></div>' 113 } 114 $api.byId('content').innerHTML = detail_comment_html; 115 116 117 } else { 118 alert(JSON.stringify(err)); 119 } 120 }); 121 122 }; 123 124 var user_headimg; 125 var user_nickname; 126 127 function closeWin() { 128 api.closeWin({}); 129 }; 130 </script> 131 132 </html>