多了<audio controls="controls" style="display: none;"></audio>

本文揭示了在谷歌浏览器中使用有道词典插件可能导致iframe上传功能异常的问题。详细解释了如何由于额外的音频元素注入,使得返回的JSON字符串无法正确解析,从而影响数据处理流程。

谷歌浏览器慎用有道词典,有道词典会导致body里面多一个元素

<audio controls="controls" style="display: none;"></audio>

什么情况下,你会察觉到这个问题让你非常头疼呢??

我们都知道,大多数的上传插件,为了实现无刷新页面上传,通常都会构建一个虚拟的iframe和form,比如ajaxupload,它会把form的target属性指定为iframe中的name值,目的是指定返回的页面在哪里打开,上传一般都是返回的json字符串,所以这时候返回json字符串就会被添加到iframe的body中,再获取iframe中body的值作为上传文件的返回结果。

会有什么问题呢??

这时候返回的是json字符串,你要对数据进行处理,你就得转化为json数据,遗憾的是不管你是用eval转化,还是用JSON.parse转化,都会出现错误,因为这时候获取的返回结果中多了一行<audio controls="controls" style="display: none;"></audio>。

 

你肯定会冥思苦想到底是哪多了这一句呢,原因就可能是你的有道词典导致的,所以若需要用翻译插件,谷歌翻译我觉得会是谷歌浏览器的更好搭配。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" /> <title>day</title> <link rel="stylesheet" href="../../../assets/index.css" /> <script src="../../../assets/crypto-js/crypto-js.js"></script> <link rel="stylesheet" href="../../../assets/mine.css" /> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app" v-cloak> <van-nav-bar :title="title" @click-left="back" @click-right="toPath('../../../主页.html')"> <template #left> <van-icon name="arrow-left" /> </template> <template #right> <van-icon name="wap-home" /> </template> </van-nav-bar> <div id="date_vi"> <div id="date" class="link"> <van-cell @click="show = true"> <div id="date_view">{{ dateString + weekDay }}</div> </van-cell> <van-calendar :show-confirm="false" v-model:show="show" @confirm="onConfirm" :default-date="new Date(dateString)" :row-height="48" :min-date="minDate" :max-date="maxDate"></van-calendar> </div> <div id="main"> <van-space> <van-button type="success" @click="dayJump(-1)">前一天</van-button> <van-button :type="disTodayButton?'default':'primary'" @click="backToday" :disabled="disTodayButton">今天</van-button> <van-button type="success" @click="dayJump(1)">后一天</van-button> </van-space> <div><audio :src="audioSrc" controls></audio></div> <div id="con"> <van-cell v-for="item in showData"> <div v-html="item"></div> </van-cell> </div> </div> </div> <van-back-top></van-back-top> </div> </body> <script src="../../../assets/v3.js"></script> <script src="../../../assets/min.js"></script> <script src="../../../assets/mine.js"></script> <style> #con { margin-top: 10px; } #date_view { font-size: 24px; font-weight: bold; text-align: center; width: 100%; color: #000; } #main { /* margin-top: 1em; */ text-align: center; } #date { margin: 10px 10px 0 10px; display: flex; align-items: center; justify-content: center; } </style> </html> 解释下代码
最新发布
11-14
<html> <head> <style type="text/css"> nav { width: 1000px; margin: 0 auto; background-color: #333; } .main-nav { list-style-type: none; margin: 0; padding: 0; display: flex; } .main-nav li { position: relative; } .main-nav li a { display: block; color: white; text-align: center; padding: 15px 20px; text-decoration: none; } .main-nav li a:hover { background-color: #555; } .sub-nav { display: none; position: absolute; top: 100%; left: 0; width: 250px; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .sub-nav li { width: 100%; } .sub-nav li a { color: black; padding: 12px 16px; text-align: left; } .sub-nav li a:hover { background-color: #f1f1f1; } .main-nav li:hover .sub-nav { display: block; } body { background-color: #1A1A20; } #div1 { color: #DB0003; } #div2 { color: #DB0003; } #div3 { color: #DB0003; } #div4 { color: #DB0003; } #div5 { position: absolute; left: 447px; top: 766px; }#div6{ position: absolute; left: 446px; top: 766px; } #div7 { position: absolute; left: 450px; top: 770px; } #div8 { position: absolute; left: 451px; top: 771px; } .bgt { border-radius: 20px; opacity: 0.9; color: #FFFFFF; text-align: center; } </style> <script type="text/javascript"> function MM_showHideLayers() { //v9.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } </script> </head> <body onLoad="MM_showHideLayers('div5','','hide','div6','','hide','div7','','hide','div8','','hide')"> <audio src="其他/Die+For+You+-+VALORANT、Grabbitz.mp3" autoplay loop></audio> <table width="1000" border="0" align="center" > <tr> <td colspan="4" bgcolor="#1A1A20" style="text-align: center; color: #FFFFFF;"><img src="其他/_cgi-bin_mmwebwx-bin_webwxgetmsgimg__&MsgID=4148908075982077618&skey=@crypt_8ebc1c7c_fd22e689e4777540ba11146d3cc3bb3c&mmweb_appid=wx_webfilehelper.jpg" width="828" height="438" alt=""/></td> </tr> </table> <nav> <ul class="main-nav"> <li><a href="index.html">跳回首页</a></li> <li> <a href="#">角色介绍</a> <ul class="sub-nav"> <li><a href="角色网站/先锋.html"><img src="其他/j (2).jpg" width="90" height="90" alt=""/></a></li> <li><a href="角色网站/决斗.html"><img src="其他/j.jpg" width="90" height="90" alt=""/></a></li> <li><a href="角色网站/哨位.html"><img src="其他/s.jpg" width="90" height="90" alt=""/></a></li> <li><a href="角色网站/控场.html"><img src="其他/y.jpg" width="90" height="90" alt=""/></a></li> </ul> </li> <li> <a href="#">战队预测</a> <ul class="sub-nav"> <li><a href="战队网站/CN.html">CN赛区</a></li> <li><a href="战队网站/AM.html">AMERICAS赛区</a></li> <li><a href="战队网站/PA.html">PACIFIC赛区</a></li> <li><a href="战队网站/EM.html">EMEA赛区</a></li> </ul> </li> </ul> </nav><table width="1000" border="0" align="center" bgcolor="#FFC723"> <tr> <td style="text-align: center"><div id="div1" onClick="MM_showHideLayers('div1','','show','div2','','show','div3','','show','div4','','show','div5','','show','div6','','hide','div7','','hide','div8','','hide')">A组第一轮</div></td> <td style="text-align: center"><div id="div2" onClick="MM_showHideLayers('div1','','show','div2','','show','div3','','show','div4','','show','div5','','hide','div6','','show','div7','','hide','div8','','hide')">B组第一轮</div></td> <td style="text-align: center"><div id="div3" onClick="MM_showHideLayers('div1','','show','div2','','show','div3','','show','div4','','show','div5','','hide','div6','','hide','div7','','show','div8','','hide')">C组第一轮</div></td> <td style="text-align: center"><div id="div4" onClick="MM_showHideLayers('div1','','show','div2','','show','div3','','show','div4','','show','div5','','hide','div6','','hide','div7','','hide','div8','','show')">D组第一轮</div></td> </tr> </table> <table width="2000" height="1200" border="0" align="center" background="其他/_cgi-bin_mmwebwx-bin_webwxgetmsgimg__&MsgID=1343361943730233332&skey=@crypt_8ebc1c7c_fd22e689e4777540ba11146d3cc3bb3c&mmweb_appid=wx_webfilehelper.jpg"> <tr> <td> <table width="1500" border="0" height="100 "> <tr> <td class="bgt" bgcolor="#000000"><a href="https://val.qq.com/main.html"><img src="其他/枪/屏幕截图 2025-02-03 101545.png" width="100" height="90" alt=""/></a><span style="font-size: 12px; color: #9C9C9C;">由25级大数据五班魏卜琛制作/助手赵思博</span></td> </tr> </table></td> </tr></table> <div id="div5" onfocus="MM_showHideLayers('div5','','hide','div6','','show','div7','','show','div8','','show')"><table width="600" border="0" class="bgt" bgcolor="#000000"> <tr> <td><table width="550" border="0" bgcolor="#000000" class="bgt"> <tr> <td align="center"><img src="其他/战队/_cgi-bin_mmwebwx-bin_webwxgetmsgimg__&MsgID=7820600859986675274&skey=@crypt_8ebc1c7c_f27e0d18584536c2a4c25ee85177056f&mmweb_appid=wx_webfilehelper.jpg" alt="" width="150" height="150" onClick="MM_openBrWindow('战队介绍/PRX.html','','width=600,height=400')"/></td> <td align="center"><h1><span style="color: #FFFFFF">2:0</span></h1></td> <td align="center"><img src="其他/战队/_cgi-bin_mmwebwx-bin_webwxgetmsgimg__&MsgID=1015049091162566002&skey=@crypt_8ebc1c7c_f27e0d18584536c2a4c25ee85177056f&mmweb_appid=wx_webfilehelper.jpg" alt="" width="150" height="150" onClick="MM_openBrWindow('战队介绍/XLG.html','','width=600,height=400')"/></td> </tr> </table> </td> </tr> </table> </div> <div id="div6"><table width="600" border="0" bgcolor="#000000" class="bgt"> <tr> <td><table width="550" border="0"> <tr> <td align="center"><img src="其他/战队/_cgi-bin_mmwebwx-bin_webwxgetmsgimg__&MsgID=1015049091162566002&skey=@crypt_8ebc1c7c_f27e0d18584536c2a4c25ee85177056f&mmweb_appid=wx_webfilehelper.jpg" alt="" width="150" height="150" onClick="MM_openBrWindow('战队介绍/BLG.html','','width=600,height=400')"/></td> <td align="center"><h1><span style="color: #FFFFFF">2:0</span></h1></td> <td align="center"><img src="其他/战队/_cgi-bin_mmwebwx-bin_webwxgetmsgimg__&MsgID=8364989887320869850&skey=@crypt_8ebc1c7c_f27e0d18584536c2a4c25ee85177056f&mmweb_appid=wx_webfilehelper.jpg" alt="" width="150" height="150" onClick="MM_openBrWindow('战队介绍/MIBR.html','','width=600,height=400')"/></td> </tr> </table> </td> </tr> </table></div> <div id="div7"><table width="600" border="0" bgcolor="#000000" class="bgt"> <tr> <td><table width="550" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center"><img src="其他/战队/_cgi-bin_mmwebwx-bin_webwxgetmsgimg__&MsgID=1020119938304754695&skey=@crypt_8ebc1c7c_f27e0d18584536c2a4c25ee85177056f&mmweb_appid=wx_webfilehelper.jpg" alt="" width="150" height="150" onClick="MM_openBrWindow('战队介绍/DRG.html','','width=600,height=400')"/></td> <td align="center"><h1><span style="color: #FFFFFF">2:0</span></h1></td> <td align="center"><img src="其他/战队/_cgi-bin_mmwebwx-bin_webwxgetmsgimg__&MsgID=6201835027917834637&skey=@crypt_8ebc1c7c_f27e0d18584536c2a4c25ee85177056f&mmweb_appid=wx_webfilehelper.jpg" alt="" width="150" height="150" onClick="MM_openBrWindow('战队介绍/T1.html','','width=600,height=400')"/></td> </tr> </table> </td> </tr> </table></div> <div id="div8"><table width="600" border="0" bgcolor="#000000" class="bgt" > <tr> <td><table width="550" border="0"> <tr> <td align="center"><img src="其他/战队/_cgi-bin_mmwebwx-bin_webwxgetmsgimg__&MsgID=1231234624555897562&skey=@crypt_8ebc1c7c_f27e0d18584536c2a4c25ee85177056f&mmweb_appid=wx_webfilehelper.jpg" alt="" width="150" height="150" onClick="MM_openBrWindow('战队介绍/NRG.html','','')"/></td> <td align="center"><h1><span style="color: #FFFFFF">2:0</span></h1></td> <td align="center"><img src="其他/战队/_cgi-bin_mmwebwx-bin_webwxgetmsgimg__&MsgID=1392589069122518278&skey=@crypt_8ebc1c7c_f27e0d18584536c2a4c25ee85177056f&mmweb_appid=wx_webfilehelper.jpg" alt="" width="150" height="164" onClick="MM_openBrWindow('战队介绍/EDG.html','','')"/></td> </tr> </table> </td> </tr> </table></div> </body> </html>分析代码的含义
09-19
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D旋转立体相册源码(送给那个她)</title> <link rel="stylesheet" href="index.css"> <link rel="shortcut icon" href="https://www.xfabe.com/favicon.ico" type="image/x-icon" /> </head> <body> <!-- 自动循环播放音乐(谷歌浏览器内核除外) --> <audio src="https://links.xfyun.club/xfyun/fansisi.mp3" autoplay="autoplay" loop="loop" controls="controls"></audio> <!-- 3d旋转的盒子 --> <div class="xf_3d_box"> <!-- 内部 --> <ul class="xf_rotate_1"> <!-- 这里修改照片路径 --> <li><img src="img/xw1.jpg" alt="女友照片"></li> <li><img src="img/xw2.jpg" alt="女友照片"></li> <li><img src="img/xw3.jpg" alt="女友照片"></li> <li><img src="img/xw4.jpg" alt="女友照片"></li> <li><img src="img/xw5.jpg" alt="女友照片"></li> <li><img src="img/xw6.jpg" alt="女友照片"></li> </ul> <!-- 外部 --> <ul class="xf_rotate_2"> <li><img src="img/xw1.jpg" alt="女友照片"></li> <li><img src="img/xw2.jpg" alt="女友照片"></li> <!-- 第三个和第四个隐藏了 --> <li><img src="img/xw3.jpg" alt="女友照片"></li> <li><img src="img/xw4.jpg" alt="女友照片"></li> <li><img src="img/xw5.jpg" alt="女友照片"></li> <li><img src="img/xw6.jpg" alt="女友照片"></li> </ul> </div> <script> let div = document.querySelector('.xf_3d_box') let ul = document.querySelector('.xf_rotate_2') let xfhusband = false div.addEventListener('click', function () { xfhusband = !xfhusband if (xfhusband) { ul.style.opacity = 1 } else { ul.style.opacity = 0 } console.log((xfhusband)); }) </script> </body> </html> 我要让他拥有更的交互功能
06-05
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值