다중 브라우저와 호환되는 JavaScript 작성 방법 분석_javascript 기술
Firefox로 대표되는 타사 브라우저의 등장으로 우리가 구축하는 웹사이트는 더 이상 IE만으로는 불가능합니다. 원본 자바스크립트 코드 중 일부가 IE 이외의 브라우저에 배치되면 제대로 실행되지 않거나 오류가 발생하는 경우가 많습니다. 그래서 여기에서는 JS를 더욱 표준화되고 호환 가능하게 만들기 위해 개선하는 방법을 소개하겠습니다.
샘플 코드:
<body> <table border="1" cellspacing="0" cellpadding="0" id="apple" > <tbody> <tr> <td id="banana" style="color:red" >不吃苹果</td> </tr> </tbody> </table> </body>
W3C DOM 작성 방법을 사용해 보세요.
이전에 액세스한 개체는 다음과 같습니다.
document.all.apple 또는 apple
이제 다음을 사용해야 합니다.
document.getElementById("apple")를 사용하여 ID로 객체에 액세스해야 하며, ID는
document.getElementsByTagName("p")[0] 페이지에서 고유해야 합니다. 태그 이름 개체에 액세스하려면
개체의 원래 속성은 다음과 같습니다.
document.all.apple.width=100 또는 apple.width=100
이제는 다음과 같습니다.
document.getElementById(" apple").setAttribute("width","100")
document.getElementsByTagName("p")[0].setAttribute("width","100")
액세스하려면 객체의 속성은 다음을 사용합니다.
document.getElementById("apple").getAttribute("width")
document.getElementsByTagName("p")[0].getAttribute("width")
IE 아래의 W3C DOM 몇 가지 제한
처음에는 IE가 전체 브라우저 점유율의 95%를 차지하고 경쟁 압박도 없었기 때문에 사장은 WEB 표준을 완전히 따르지 않고 다른 것을 고집했습니다.
IE에서는 객체의 스타일, 클래스, 이벤트 응답 속성을 설정하기 위해 setAttribute를 올바르게 사용할 수 없습니다.
따라서 다양한 호환성을 위해서는 원래의 점 표기법에 따라 액세스하고 설정해야 합니다. 브라우저의 효과:
document.getElementById("banana").class
document.getElementById("banana").style.color
document.getElementById("banana").onclick
document.getElementById("banana").class="fruit"
document.getElementById("banana").style.color="blue"
document.getElementById("banana").onclick= function (){alert("我是香蕉")}Firefox의 온로드 문제에 대하여
function over(){
alert("页面加载完毕")
}정상적인 상황에서 우리는 온로드 응답 기능을 수행합니다. 할당은 다음과 같습니다:
document.body.onload= over
그러나 이는 Firefox에서는 실행할 수 없습니다.
그래서 우리는 모두 다음 형식을 사용합니다:
window.onload=over
정보 IE TABLE에 새 행을 삽입할 수 없는 문제
IE 아래의 TABLE에 innerHTML을 사용하여
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_text = document.createTextNode("香蕉不吃苹果");
cell.appendChild(cell_text);
row.appendChild(cell);
document.getElementsByTagName("tbody")[0].appendChild(row);1. 🎜>(1) 기존 문제:
기존 코드에 document.formName.item("itemName")과 같은 문이 많아 MF에서 실행할 수 없습니다.
(2) 해결 방법:
document를 사용하세요. .formName.elements["elementName"] 대신
(3) 기타
2
2. 컬렉션 클래스 객체 문제
(1) 기존 문제:
현재 많이 있습니다. 액세스할 때 ()를 사용하는 코드의 컬렉션 클래스 개체는 이를 허용할 수 있지만 MF는 허용할 수 없습니다.
(2) 해결 방법:
아래 첨자 연산으로 []를 대신 사용하세요. 예: document.forms("formName")은 document.forms["formName"]으로 변경됩니다.
또 다른 예: document.getElementsByName("inputName")(1)이 document.getElementsByName("inputName")[1]으로 변경됨
(3) 기타
window.event
(1)기존 문제:
window.event를 MF에서 실행할 수 없습니다.
(2)해결책:
MF의 이벤트는 이벤트가 발생한 장면에서만 사용할 수 있습니다. 이 문제는 아직 해결되지 않습니다. 다음과 같이 수정할 수 있습니다.
원본 코드(IE에서 실행 가능):
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
...
<script language="javascript">
function gotoSubmit() {
...
alert(window.event); // use window.event
...
}
</script><input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
...
<script language="javascript">
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt); // use evt
...
}
</script>此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。
4. HTML 对象的 id 作为对象名的问题
(1)现有问题
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
(2)解决方法
用 getElementById("idName") 代替 idName 作为对象变量使用。
5. 用idName字符串取得对象的问题
(1)现有问题
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
(2)解决方法
用 getElementById(idName) 代替 eval(idName)。
6. 变量名与某 HTML 对象 id 相同的问题
(1)现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
(2)解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
(3)其它
参见 问题4
7. event.x 与 event.y 问题
(1)现有问题
在IE 中，event 对象有 x, y 属性，MF中没有。
(2)解决方法
在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。
如果要完全一样，可以稍麻烦些：
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
(3)其它
event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。
8. 关于frame
(1)现有问题
在 IE中 可以用window.testFrame取得该frame，mf中不行
(2)解决方法
在frame的使用方面mf和ie的最主要的区别是：
如果在frame标签中书写了以下属性：
<frame src="xx.htm" id="frameId" name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
ie： window.top.frameId或者window.top.frameName来访问这个window对象
mf： 只能这样window.top.frameName来访问这个window对象
另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容
关于frame和window的描述可以参见bbs的‘window与frame'文章
以及/test/js/test_frame/目录下面的测试
----adun 2004.12.09修改
9. 在mf中，自己定义的属性必须getAttribute()取得
10.在mf中没有 parentElement parement.children 而用
parentNode parentNode.childNodes
childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。
一般可以通过node.getElementsByTagName()来回避这个问题。
当html中节点缺失时，IE和MF对parentNode的解释不同，例如
<form> <table> <input/> </table> </form>
MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
MF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)
11.const 问题
(1)现有问题:
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
(2)解决方法:
不使用 const ，以 var 代替。
12. body 对象
MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在
13. url encoding
在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
一般MF无法识别js中的&
14. nodeName 和 tagName 问题
(1)现有问题：
在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象
有问题（具体情况没有测试，但我的IE已经死了好几次）。
(2)解决方法：
使用 tagName，但应检测其是否为空。
15. 元素属性
IE下 input.type属性为只读，但是MF下可以修改
16. document.getElementsByName() 和 document.all[name] 的问题
(1)现有问题：
在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 p 元素（是否还有其它不能取的元素还不知道）。
以上就是Javascript多种浏览器兼容写法分析_javascript技巧的内容，更多相关内容请关注PHP中文网（www.php.cn）！
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7414
15
1359
52
76
11
21
19
WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법
Dec 17, 2023 pm 02:54 PM
WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.
WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술
Dec 17, 2023 pm 05:30 PM
WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술
WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법
Dec 17, 2023 am 09:39 AM
WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.
가장 안정적인 Win10 버전
Dec 25, 2023 pm 07:58 PM
많은 사용자가 컴퓨터를 작동할 때 정지되거나 블루 스크린을 경험하게 됩니다. 현재 가장 안정적인 win10 버전을 찾아야 합니다. 전반적으로 사용이 매우 쉽고 일상적인 사용이 더 원활해집니다. 역사상 가장 안정적인 win10 버전 1. Win10 정품 오리지널 시스템. 여기서 사용자는 간단한 조작을 사용할 수 있습니다. 시스템은 최적화되었으며 강력한 안정성, 보안 및 호환성을 갖추고 있습니다. 2. 러시아어 마스터. streamlined win10 버전은 엄격하게 간소화되었으며 불필요한 기능과 서비스가 많이 삭제되었습니다. 효율화 후에는 시스템의 CPU 및 메모리 사용량이 낮아지고 실행 속도가 빨라집니다. 3. Win10 Lite Edition 1909는 하드웨어 모델이 서로 다른 여러 컴퓨터에 설치됩니다.
JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법
Dec 17, 2023 pm 12:09 PM
JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면
JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축
Dec 17, 2023 pm 05:13 PM
JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리
간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법
Jan 05, 2024 pm 06:08 PM
JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용
Switch2는 스위치 카트리지와 호환됩니까?
Jan 28, 2024 am 09:06 AM
Switch2는 Nintendo가 Gamescom 2023에서 발표한 새로운 모델입니다. 일부 플레이어는 새 모델과 이전 버전의 카트리지 간에 호환성 문제가 있을지 걱정하고 있습니다. 스위치2는 스위치 카세트와 호환됩니까? 답변: 스위치2는 스위치 카세트와 호환되지 않습니다. Switch 2 카트리지 소개 Nintendo의 생산 체인 회사의 정보에 따르면 Switch 2는 64GB 카트리지를 사용할 수 있습니다. 더 나은 성능을 제공하고 더 많은 3A 게임 걸작을 지원하기 때문에 더 큰 카트리지 용량이 필요합니다. 많은 게임 작품을 게임 카트리지에 넣기 전에 거세하고 압축해야 하기 때문입니다. 게다가 스위치 카트리지는 게임 콘텐츠를 복사할 가능성이 높으므로 새 카트리지로 교체하세요.
