외부 사이트의'js 태그 삽입'을 만들 때 주의해야 할 것
4540 단어 혼동JavaScript표식경량화
자신이 만든javascript 라벨을 다른 사이트에 끼워서 사용할 때 걱정되는 일이 많습니다.
그때 내가 주의한 일은 매우 두루뭉술하게 썼다.
※ Advent 캘린더가 처음 투고됩니다.사정을 봐주다.땀이 나서 미끄러져 들어가는 건 아니지만,,!
단도직입적으로 주의하고 있는 일...
업데이트 가능
외부 사이트에 js를 삽입한 후
"아이고...이건 외부 사이트의 태그 자체를 수정해야 한다"
이렇게 되지 않도록 서버에서 수정할 수도 있습니다.
GA 태그 등을 참조하여 서버에서 업데이트할 수 있습니다.
site.html<!-- 埋め込みjsタグ -->
<script async src="https://example.jp/jstag?id=12345"></script>
<script type='text/javascript'>
hogetag('config', 'ABCDE')
</script>
※ 개인 기재script type="text/javascript"
라면 안심할 수 있지만, html5에서 기재하지 않아도 기본 설정이기 때문에 이번에는 기재하지 않습니다.
여기서 js의 읽기 시기를 주의해야 한다.async
비동기식 읽기 가능defer
에서 html를 완전히 읽고 실행합니다.
아니면 js 라벨이 있는 임의의 시간 등등.
여기 기사가 매우 알기 쉬워졌으니 참고하십시오.
제작된 js 태그가 외부 사이트에 폐를 끼치지 않도록
다른 라이브러리에 의존하지 않고 순수한javascript로 쓰기, 예를 들어 jQuery
jquery를 자주 사용합니다. jquery 라이브러리와 다른 js 라이브러리가 없어도
나는 네가 순수한 js로 써서 그것을 움직이게 할 것을 건의한다.
만약 다른 프로그램 라이브러리 등을 사용한다면, 이 프로그램 라이브러리도 업데이트성을 의식해야 한다.
작용역을 사용하면 삽입된 사이트의 변수와 함수 등과 충돌하지 않도록 주의하세요
만약 작용역을 추가하지 않고 check()
등 함수 이름을 만들면, 이 함수는 이미 외부 사이트에서 사용된다
js 오류 같은 것도 있고.땀
최초의 예에서 hogetag () 라는 이름으로 만들어진 것이다
실시간 함수로 절대 구역을 만들 수 있으며 함수 내에서만 조작할 수 있다.
바로 끼워넣은 js 태그 때문!이렇게 생각하다.
server.js(function () {
//jsタグのメイン処理等
}());
js 실시간 함수여기에 관한 글은 매우 참고 가치가 있다.
※ 자바스크립트의 예약어도 주의해야 합니다.→ 참고 자료
안전 여부
<!-- 埋め込みjsタグ -->
<script async src="https://example.jp/jstag?id=12345"></script>
<script type='text/javascript'>
hogetag('config', 'ABCDE')
</script>
(function () {
//jsタグのメイン処理等
}());
읽는 데 시간이 걸리지 않도록.
?t=1608562686
등 현지 캐시 업데이트 등에 적합한지js 라벨로 생성된 node(html 라벨) 등이 적절한지 여부
W3C 등의 참고로 먼저 div 등이 되는지.
혼동과 경량화
js 태그가 어느 정도 완성되면
난독화된 역방향 공사 대책
js 라벨의 읽기 속도를 높이기 위해 경량화를 연구해 보는 것이 어떻습니까?
그리고 Copyright를 멋지게 끼세요.
사이트 설명
브라우저에서 확인
나는 아래의 유명한 조회 검사 도구를 사용하면 매우 수월할 것이라고 생각한다.
※ 무료 버전과 유료 버전이 있습니다.
실기와 js의 행동이 달라지기 때문에 실기로 테스트하는 것을 추천합니다.
끝까지 읽어주셔서 감사합니다!
Reference
이 문제에 관하여(외부 사이트의'js 태그 삽입'을 만들 때 주의해야 할 것), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/matsuyoro/items/d6793ab9e5bf0228c302텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)