JavaScript의 실행 순서를 보장하는 방법: jQuery.html은 *_jquery가 아닙니다.

1. 소개
이전 글 "JavaScript의 실행 순서를 확인하는 방법 - jQuery.html 심층 분석"에서 jQuery.html 함수를 사용할 수 있는 이유를 밝혔습니다. 다양한 브라우저 동적 JS를 순차적으로 실행하는 비결은 외부 JavaScript의 동기식 AJAX 검색입니다.
HTML 소스 코드(test2.htm)를 간단히 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

<script> { <br>$( '#container').html('<script src="http://test1.sanshi.me/jsorder/service.ashx?file=js/jquery-ui.js&delay=2000" 유형 ="text/javascript" ></script>' '<script>alert(typeof(jQuery.ui));</script>')

/html>


可以看到，其中的jQueryUI脚本指向的是第二个域名下的（test1.sanshi.me）。
3) 在不同浏览器下测试

	test2_1.htm 使用jQuery.html函数动态加载其它域下的JavaScript
Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11

3. jQuery.html并非万能钥匙，那么
不知道大家是否还记得我们在第一篇文章中提到的test3.htm不，这个结果和那个示例的结果一模一样，jQuery.html也并非万能钥匙。这不禁让我们怀疑这两个示例的内部逻辑是否一样？
但是第二篇文章不是明明白白告诉我们，jQuery.html使用的是同步AJAX的机制来加载外部JS的么？等等。。。。。。
大家有没有从上面的分析中发现问题，AJAX来加载其他域的资源，这不是明摆着违背了大名鼎鼎的同源策略（Same Origin Policy）了么？所以jQuery不可能这么实现，我们来看看jQuery.ajax文档是怎么说的：

看来我们在第二篇文章中看到的这个函数（evalScript）内部并非真的通过同步AJAX来获取数据：

4. 深入jQuery.ajax函数，看看怎么加载不同域下的JS文件

注释已经写的很清楚了，如果是通过GET方式请求JavaScript文件，并且这个文件是在其他域下面的（remote），那么就通过在head中添加script标签来处理，而不是走AJAX的流程。所以在这个条件分支结束的时候，直接从函数体返回：

经过分析，我们发现在动态加载不同域的JavaScript时，jQuery.html其实采用了在head中添加script标签的做法（不管是外部JS或者内联JS），这和我们在第一篇文章中提到的test3.htm是一模一样的逻辑，这也验证了我们的想法：

 

由此可见，如果想兼容CDN加速静态资源的情况，还必须使用第一篇文章中提到的“方案一，如何在动态添加script标签时确保执行顺序”。

5. 추첨

원래 이 시리즈의 기사는 여기서 끝났어야 했습니다. 그런데 jQuery1.5.1을 테스트해보니 제가 예전부터 알고 있던 jQuery1.4.4와는 다르다는 것을 알게 되었습니다. AJAX 부분을 리팩토링했는데, 의외로 우리 코드에 약간의 영향을 미쳤습니다.

구체적인 영향에 대해서는 다음 문서를 참조하세요.

jQuery1.5.1과 jQuery1.5.1 사이에서 JavaScript - 의 실행 순서를 보장하는 방법 🎜>jQuery1.4.4의 약간의 차이. 계속됩니다. . .

관련 라벨：

javascript 실행 순서

원천：php.cn

이전 기사：jquery_jquery에서 레이블 전환 효과를 달성하는 코드 다음 기사：IE 이미지 캐시 document.execCommand("BackgroundImageCache",false,true)_javascript 기술

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

• NullPointerException은 무엇이며 어떻게 해결합니까?
  2024-10-22 09:46:29
• 초보자에서 코더까지: C 기초로 시작되는 여정
  2024-10-13 13:53:41
• PHP로 웹 개발 잠금 해제: 초보자 가이드
  2024-10-12 12:15:51
• C에 대한 이해: 새로운 프로그래머를 위한 명확하고 간단한 길
  2024-10-11 22:47:31
• 코딩 잠재력 발휘: 완전 초보자를 위한 C 프로그래밍
  2024-10-11 19:36:51
• 내면의 프로그래머를 깨워보세요: 완전 초보자를 위한 C
  2024-10-11 15:50:41
• C로 일상을 자동화하세요: 초보자를 위한 스크립트 및 도구
  2024-10-11 15:07:41
• PHP가 쉬워졌습니다: 웹 개발의 첫 번째 단계
  2024-10-11 14:21:21
• Python으로 무엇이든 빌드하기: 창의력을 발휘하기 위한 초보자 가이드
  2024-10-11 12:59:11
• 코딩의 핵심: 초보자를 위한 Python의 힘 활용
  2024-10-11 12:17:31

최신 이슈

JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}

에서 2024-04-06 19:25:49

0

1

505

d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...

에서 2024-04-06 18:16:26

0

1

403

공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...

에서 2024-04-06 15:35:24

0

1

274

Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...

에서 2024-04-06 14:54:03

0

2

421

CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...

에서 2024-04-06 12:53:11

0

1

376

관련 주제

더>

• js에서 배열의 길이를 얻는 방법
• js 현재 페이지 새로 고침
• JS 반올림
• 노드를 삭제하는 Node.js 메소드
• 자바스크립트 이스케이프 문자
• js에서 난수를 생성하는 방법
• JavaScript를 활성화하는 방법
• JS의 Symbol 클래스에 대한 자세한 설명