<script>中text/javascript和application/javascript两个不同属性的区别

本文详细阐述了一个在多个浏览器下能够正常运行的javascript脚本,在特定IE浏览器版本中出现运行障碍的问题,并通过修改<script>标签的type属性解决了此问题。文章还补充介绍了不同类型属性在不同浏览器环境下的适用性和区别。
部署运行你感兴趣的模型镜像

如题。

        我最近在做的一个项目里面遇到一个小问题。就是我写在<script>标签中的javascript语句,在chrome,safari,firefox,IE9.10.11上面都可以正常运行,但是到了IE8以下的浏览器就无法运行了。

         一开始以为是我的语句里面有一些兼容性问题,于是我又单独写了个例子去运行,同样的javascript代码在各个浏览器中都成功运行,可是到了我的项目中就是运行不了。

         偶然之中,我瞥见我的<script>标签是这样子写的:

    

<script type="application/javascript">
//执行语句
</script>
         这是书写的时候Dreamweaver自动补全的。

         但是在我自己运行的例子中我的script标签写的是:

<script type="text/javascript">
//执行语句
</script>
          于是,我将我项目中的标签type属性修改成了text-javascript,然后,然后在IE8一下就可以运行了。

          下面补充一下关于这个属性的一些知识:

           最实用的用法,现在各大浏览器已经都基本上支持了HTML5,HTML5中我们已经可以直接使用<script></script>而不需要制定script标签的type属性了。

           根据内核属性,我们将浏览器分为四类:IE6/7/8/9/10/11,firefox, chrome/safari, opera.

           如果需要在script标签中添加type属性,一般type有下面几种:

           1.text/javascript:这是目前来说次于<script></script>标签的最合适的type属性

           2.application/javascript:这个属性亲测在IE8以下的浏览器中无法被识别。

          3.language="javascript":这个标签是W3C的HTML标准,但是目前已经不再推荐使用。

          4. text/ecmascript:少用

          5. text/jscript:少用

          6.text/vbscript:少用

  

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

Stable-Diffusion-3.5

图片生成
Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型,相比 3.0 版本,它提升了图像质量、运行速度和硬件效率

function repire(){ let repire = document.getElementById("username"); if(repire.value == ''){ repire.value="请输入用户名"; } } function mima(){ let mima = document.getElementById("mima"); if(mima.value == ''){ mima.value="请输入密码"; } } function validateUsername() { const usernameInput = document.getElementById('username'); const username = usernameInput.value; const regex = /[^a-z]/; if (regex.test(username)) { usernameInput.classList.add('invalid'); } else { usernameInput.classList.remove('invalid'); } } function repire() { // 可添加输入框的修复或初始化逻辑 } function mima() { // 可添加密码输入框的交互逻辑 } function register() { const username = document.getElementById('username').value; const password = document.getElementById('mima').value; const confirmPassword = document.getElementById('confirmMima').value; if (/[^a-z]/.test(username)) { alert('用户名只能包含小写字母'); return; } if (password !== confirmPassword) { alert('两次输入的密码一致'); return; } // 可添加表单提交逻辑 alert('注册成功'); } function resetForm() { document.getElementById('registrationForm').reset(); } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript测试</title> <style> .invalid { color : red ; } </style> <script type="text/javascript" src="welcome.js"></script> </head> <body> <from id = "registrationFrom"> <table width="400" align="center"> <tr> <h1 align="center">用户注册(带*为必须填写)</h1> </tr> <tr> <td> <h2>用户名:</h2> </td> <td> <input type="text" id="username" oninput="validateUsername()" onfocus="repire()" onkeydown="if(event.key=='Enter'){charge()}"/> <font>*</font> </td> </tr> <tr> <td> <h2>密码:</h2> </td> <td> <input type="password" id="mima" onfocus="mima()" onkeydown="if(event.key=='Enter'){charge()}"/> <font>*</font> </td> </tr> <tr> <td> <h2>确认密码:</h2> </td> <td> <input type="password" id="confirmMima" onkeydown="if(event.key=='Enter'){charge()}"/> <font>*</font> </td> </tr> <tr> <td align="center"> <input type="button" value="注册" onclick="register()"/> </td> <td align="center"> <input type="button" value="重置" onclick="register()"/> </td> </tr> </table> </from> </body> </html> 两个相互对应修改合理的地方
最新发布
09-24
该html的图片具有动态效果,但是浏览器并没有显示该动态效果及其对应图片。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>About</title> <link rel="stylesheet" type="text/css" href="css/style_mobile.css"> <script language="javascript" type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script language="javascript" type="text/javascript" src="js/action.js"></script> </head> <body> <div id="container"> <div id="header"> <div id="logo">David Lanham</div> <ul> <li><a href="Index.html">Blog</a></li> <li><a href="Work.html">Work</a></li> <li><a class="active" href="About.html">About</a></li> <li><a href="Contact.html">Contact</a></li> </ul> </div> <div id="about_content"> <p class="content_text">About</p> <div id="about_slider"> <ul> <li><img src="images/About_baby.png" /></li> <li><img src="img/6.jpg" /></li> <li><img src="img/5.jpg" /></li> <li><img src="img/4.jpg" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/1.jpg" /></li> <li><img src="images/About_baby.png" /></li> </ul> </div> <div id="about_text"> <p class="about_font_big">My name is David Lanham and I creat beautiful</p> <p class="about_font_big">illustrations that capture imaginations of all</p> <p class="about_font_big">ages. I currently work at <font color="#f04922">Illustration Industries</font></p> <p class="about_font_big">and I am based in <font color="#f04922">Washington, DC.</font></p> <div id="about_text_small"> <p class="about_font_small">I began my career when I was younger, and started drawing all</p> <p class="about_font_small">kinds of glorious and wonderful creatures. I rearely ever drew</p> <p class="about_font_small">humans, and even tot his day I prefer drawing characters with</p> <p class="about_font_small">interesting features that would only be found in childrens books.</p> <p class="about_font_small">I then created my own illustration company and began creating</p> <p class="about_font_small">new illustrations for magazines and websites, and even did</p> <p class="about_font_small">icons for creative companies.</p> </div> <ul> <li><a href="#"><img src="images/About_bird.png"></a></li> <li><a href="#"><img src="images/About_ball.png"></a></li> <li><a href="#"><img src="images/About_be.png"></a></li> <li><a href="#"><img src="images/About_@.png"></a></li> <li><a href="#"><img src="images/About_message.png"></a></li> </ul> </div> </div> <div id="footer"> <div id="fttext"> <p>All illustrations on this site are from the very talented</p> <p> illustrator and designer David Lanham. Make sure to</p> <p>check out his work at <a href="#">DavidLanham.com.</a></p> </div> <div id="ftimage"> <a href="#"><img src="images/footer_baby.png"></a> </div> <div id="ft_text"> <p class="ftname">David Lanham</p> <p class="ftabout">I create beatufiul illustrations and designs.<a href="#">About me.</a></p> </div> <ul> <li><a href="#"><img src="images/footer_bird.png"></a></li> <li><a href="#"><img src="images/footer_ball.png"></a></li> <li><a href="#"><img src="images/footer_be.png"></a></li> <li><a href="#"><img src="images/footer_@.png"></a></li> <li><a href="#"><img src="images/footer_message.png"></a></li> </ul> </div> </div> </body> </html>
08-20
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>评论列表</title> <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/iconfont.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/jquery-1.12.4.min.js"></script> <script src="axios.min.js"></script> </head> <body> <div class="container-fluid"> <div class="common_title"> 评论列表 </div> <div class="container-fluid common_con"> <table class="table table-striped table-bordered table-hover mp20"> <thead> <tr> <th>作者</th> <th>评论</th> <th>评论在</th> <th>提交于</th> <th>状态</th> <th class="text-center" width="100">操作</th> </tr> </thead> <tbody> <tr> <td>小周</td> <td>这是一条测试评论,欢迎光临</td> <td>《世界,你好》</td> <td>2017-07-04 12:00:00</td> <td>已批准</td> <td class="text-center"> <a href="javascript:editTr( 'rejected',1 );" class="btn btn-warning btn-xs">拒绝</a> <a href="javascript:editTr( 'trashed',1 );" class="btn btn-danger btn-xs">删除</a> </td> </tr> <tr> <td>小右</td> <td>I am fine thank you and you?</td> <td>《世界,你好》</td> <td>2017-07-11 22:22:00</td> <td>已批准</td> <td class="text-center"> <a href="javascript:editTr( 'rejected',6 );" class="btn btn-warning btn-xs">拒绝</a> <a href="javascript:editTr( 'trashed',6 );" class="btn btn-danger btn-xs">删除</a> </td> </tr> <tr> <td>唐军</td> <td>好联律物联使进很们有严这里月之。实养件矿商除政究定划必火起划六。内百那则变次引持只情车各地织持。</td> <td>《第四篇示例文章》</td> <td>1970-04-24 11:22:29</td> <td>已批准</td> <td class="text-center"> <a href="javascript:editTr( 'rejected',11 );" class="btn btn-warning btn-xs">拒绝</a> <a href="javascript:editTr( 'trashed',11 );" class="btn btn-danger btn-xs">删除</a> </td> </tr> </tbody> </table> <div class="row text-center"> <ul class="pagination pagination-sm"> <li class="page-item first disabled"><a href="#" class="page-link">首页</a></li> <li class="page-item prev disabled"><a href="#" class="page-link">上一页</a></li> <li class="page-item active"><a href="#" class="page-link">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">4</a></li> <li class="page-item"><a href="#" class="page-link">5</a></li> <li class="page-item"><a href="#" class="page-link">6</a></li> <li class="page-item"><a href="#" class="page-link">7</a></li> <li class="page-item next"><a href="#" class="page-link">下一页</a></li> <li class="page-item last"><a href="#" class="page-link">尾页</a></li> </ul> </div> </div> </div> <script> // 设置左侧菜单 $('#release_btn').click(function () { window.parent.setMenu(0, 0); }) </script> <script> $(function () { const instance = axios.create({ baseURL: 'http://139.196.82.122:8080/api/v1', timeout: 5000, headers: { 'Content-Type': 'application/', "Authorization": localStorage.getItem("token"), } }); let totalPage = 0 async function getArticleList(page, perpage) { const { data } = await instance.get(`admin/comment/search?page=${page}&perpage=${perpage}`); if (data.code == 200) { $('tbody').empty(); totalPage = data.data.totalPage; data.data.data.forEach(element => { $('tbody').append(`<tr> <td>${element.author}</td> <td>${element.content}</td> <td>${element.title}</td> <td class="text-center">${element.date}</td> <td class="text-center">${element.state}</td> <td class="text-center"> <a href="javascript:editTr( 'rejected',11 );" data-id="${element.id}" class="btn btn-warning btn-xs">拒绝</a> <a href="javascript:deleteTr( ${element.id} );" data-id="${element.id}" class="btn btn-danger btn-xs">删除</a> </td> </tr>`); }); } else { alert("请求列表数据失败") } }; let page = 1; getArticleList(page, 10); $('.page-link').click(function (event) { if (event.target.text == "首页") { //首页 event.target.text 获取当前点击的文本 getArticleList(1, 10); return; } else if (event.target.text == "尾页") { getArticleList(totalPage, 10); return; } else if (event.target.text == "上一页") { if (page <= 1) { return; } getArticleList(page -= 1, 10); return; } else if (event.target.text == "下一页") { if (page == totalPage) { return; } getArticleList(page += 1, 10); return; } else { page = parseInt(event.target.text); getArticleList(page, 10); } }); $('tbody').on('click', '.btn-danger', async function (event) { event.preventDefault(); //阻止默认行为 const id = $(this).data("id"); //获取id let hr = confirm(id); if (hr) { if (!confirm("确定要删除这个评论吗?")) { return; } const { data } = await instance.delete(`/admin/comment/delete`, { id }); // 删除文章 if (data.code === 200) { alert("删除成功!"); // 重新获取当前页数据 getArticleList(page, 10); } else { alert("删除:" + data.msg); //提示错误信息 getArticleList(page, 10); //获取当前页数据 } } }); }); </script> </body> </html>为什么删除
07-08
<html> <head> <title>Draw a transient circle or rectangle</title> <script type="text/javascript" src="https://df-prod.autocad360.com/jsapi/v3/Autodesk.AutoCAD.js "> </script> <script type="text/javascript"> // Some global variables // The cursor for "OnMouseOver", as specified in the UI var cursor = ' '; // Colors for our transient definition, as they are // presented to the user in the UI var colors = new Array(); colors['Red'] = "#ff0000"; colors['Yellow'] = "#ffff00"; colors['Green'] = "#00ff00"; colors['Cyan'] = "#00ffff"; colors['Blue'] = "#0000ff"; colors['Magenta'] = "#ff00ff"; colors['White'] = "#ffffff"; // Some point information, as populated by user prompting var pt0 = new Array(); var pt1 = new Array(); var pt2 = new Array(); var pt3 = new Array(); // Function used to create the XML definition for the // transient rectangular polyline we want to draw function createPolyline() { // Get some parameters from the page var color = document.getElementById('ColCB').value; var linetype = document.getElementById('LTCB').value; var lineweight = document.getElementById('LWCB').value; var filled = document.getElementById('Filled').checked; var cursorType = document.getElementById('Cursor').value; if (cursorType == 'None') cursor = ' '; else cursor = ' cursor="' + cursorType + '"'; // Set the other rectangle corners based on the specified corners pt1[0] = pt0[0]; pt1[1] = pt2[1]; pt1[2] = pt0[2]; pt3[0] = pt2[0]; pt3[1] = pt0[1]; pt3[2] = pt0[2]; var drawable = '<?xml version="1.0" encoding="utf-8"?> \ <!-- the event handler will receive the id--> \ <drawable \ xmlns="http://www.autodesk.com/AutoCAD/drawstream.xsd"\ xmlns:t="http://www.autodesk.com/AutoCAD/transient.xsd"\ t:onmouseover ="onmouseover"' + cursor + '>\ <graphics color="' + colors[color] + '" id="id1" lineweight="' + lineweight + '" linetype="' + linetype + '" filled="' + filled + '">\ <polyline isClosed="true">\ <vertices>\ <vertex>' + pt0.toString() + '</vertex>\ <vertex>' + pt1.toString() + '</vertex>\ <vertex>' + pt2.toString() + '</vertex>\ <vertex>' + pt3.toString() + '</vertex>\ </vertices>\ </polyline>\ </graphics>\ </drawable>'; return drawable; } // Function used to create the XML definition for the // transient circle we want to draw function createCircle() { // Get some parameters from the page var color = document.getElementById('ColCB').value; var linetype = document.getElementById('LTCB').value; var lineweight = document.getElementById('LWCB').value; var filled = document.getElementById('Filled').checked; var cursorType = document.getElementById('Cursor').value; if (cursorType == 'None') cursor = ' '; else cursor = ' cursor="' + cursorType + '"'; // Use Pythagoras' theorem to get the radius of the circle // based on the points specified var radius = Math.sqrt( Math.pow(pt2[0] - pt0[0], 2) + Math.pow(pt2[1] - pt0[1], 2) ); var drawable = '<?xml version="1.0" encoding="utf-8"?> \ <!-- the event handler will receive the id--> \ <drawable \ xmlns="http://www.autodesk.com/AutoCAD/drawstream.xsd"\ xmlns:t="http://www.autodesk.com/AutoCAD/transient.xsd"\ t:onmouseover ="onmouseover"' + cursor + '>\ <graphics color="' + colors[color] + '" id="id1" lineweight="' + lineweight + '" linetype="' + linetype + '" filled="' + filled + '">\ <circle center ="' + pt0.toString() + '" radius ="' + radius.toString() + '"/>\ </graphics>\ </drawable>'; return drawable; } // Function used to draw a rectangular transient object function drawRectangularTransient() { function on1stComplete(args) { var res = args; if (res && res.value) { pt0[0] = res.value.x; pt0[1] = res.value.y; pt0[2] = res.value.z; // Once we have the first point, get the other corner var pco = new Acad.PromptCornerOptions( 'Pick second corner point', new Acad.Point3d(pt0[0], pt0[1], pt0[2]) ); Acad.Editor.getCorner(pco).then(on2ndComplete, onError); } } function on2ndComplete(args) { var res = args; if (res && res.value) { pt2[0] = res.value.x; pt2[1] = res.value.y; pt2[2] = res.value.z; // And when we have both first and second, // we can generate the XML for the transient // and ask for it to be drawn var doc = Acad.Application.activedocument; var drawable = createPolyline(); var tran = new Acad.Transient(); doc.transientManager.addTransient(tran, drawable); } } function onError(args) { alert('Unable to create rectangular transient: ' + args); } // The body of our function, where we get the first point var ppo = new Acad.PromptPointOptions( 'Pick first corner point', new Acad.Point3d(0, 0, 0) ); Acad.Editor.getPoint(ppo).then(on1stComplete, onError); } // Function used to draw a circle transient object function drawCircularTransient() { function on1stComplete(args) { var res = args; if (res && res.value) { pt0[0] = res.value.x; pt0[1] = res.value.y; pt0[2] = res.value.z; // Once we have the center point, get one on the // circumference var ppo = new Acad.PromptPointOptions('Pick point on circle'); ppo.useBasePoint = true; ppo.basePoint = new Acad.Point3d(pt0[0], pt0[1], pt0[2]); Acad.Editor.getPoint(ppo).then(on2ndComplete, onError); } } function on2ndComplete(args) { var res = args; if (res && res.value) { pt2[0] = res.value.x; pt2[1] = res.value.y; pt2[2] = res.value.z; // And when we have both first and second, // we can generate the XML for the transient // and ask for it to be drawn var doc = Acad.Application.activedocument; var drawable = createCircle(); var tran = new Acad.Transient(); doc.transientManager.addTransient(tran, drawable); } } function onError(args) { alert('Unable to create circle transient: ' + args); } // The body of our function, where we get the first point var ppo = new Acad.PromptPointOptions( 'Pick center point', new Acad.Point3d(0, 0, 0) ); Acad.Editor.getPoint(ppo).then(on1stComplete, onError); } </script> <style type="text/css"> td, body { font-family: sans-serif; font-size: 10pt; } body { background-color: #686868; padding: 0; margin: 5px 5px 5px 5px; color: #FFF; } textarea { font-family: Consolas; font-size: 8pt; } </style> </head> <body> <!-- Create a tabular UI with headings and comboboxes --> <h3>Transient circle or rectangle</h3> <table border="0"> <tr> <td align='right'>Color</td> <td> <select id='ColCB'> <option selected="selected">Red</option> <option>Yellow</option> <option>Green</option> <option>Cyan</option> <option>Blue</option> <option>Magenta</option> <option>White</option> </select> </td> </tr> <tr> <td align='right'>LineType</td> <td> <select id='LTCB'> <option selected="selected">LineTypeSolid</option> <option>Dashed</option> <option>Dotted</option> <option>Dash_Dot</option> <option>Short_Dash</option> <option>Medium_Dash</option> <option>Long_Dash</option> <option>Short_Dash_X2</option> <option>Medium_Dash_X2</option> <option>Long_Dash_X2</option> <option>Medium_Long_Dash</option> <option>Medium_Dash_Short_Dash_Short_Dash</option> <option>Long_Dash_Short_Dash</option> <option>Long_Dash_Dot_Dot</option> <option>Long_Dash_Dot</option> <option>Medium_Dash_Dot_Short_Dash_Dot</option> <option>Sparse_Dot</option> <option>Solid_6_Pixels_Blank_6_Pixels</option> </select> </td> </tr> <tr> <td align='right'>LineWeight</td> <td> <select id='LWCB'> <option>0</option> <option>5</option> <option>9</option> <option>13</option> <option>15</option> <option>18</option> <option>20</option> <option>25</option> <option selected="selected">30</option> <option>35</option> <option>40</option> <option>50</option> <option>53</option> <option>60</option> <option>70</option> <option>80</option> <option>90</option> <option>100</option> <option>106</option> <option>120</option> <option>140</option> <option>158</option> <option>200</option> <option>211</option> </select> </td> </tr> <tr> <td align='right'>Filled</td> <td><input type='checkbox' id='Filled' /></td> </tr> <tr> <td align='right'>Cursor</td> <td> <select id='Cursor' title='Cursor to be displayed on hover'> <option selected="selected">None</option> <option>None</option> <option>Arrow</option> <option>Ibeam</option> <option>Wait</option> <option>Cross</option> <option>UpArrow</option> <option>SizeNWSE</option> <option>SizeNESW</option> <option>SizeWE</option> <option>SizeNS</option> <option>SizeAll</option> <option>No</option> <option>Hand</option> <option>AppStarting</option> <option>Help</option> </select> </td> </tr> <tr> <th> </th> <td> <input type='button' style="width: 220px" onclick='drawRectangularTransient()' value='Draw Rectangle Transient' /> </td> </tr> <tr> <th> </th> <td> <input type='button' style="width: 220px" onclick='drawCircularTransient()' value='Draw Circle Transient' /> </td> </tr> </table> </body> </html> 帮我分析这段代码
07-16
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值