Sweetalert2 Modal Box를로드 한 후 외부 스크립트 초기화를위한 튜토리얼

Sweetalert2를 사용하여 모달 박스 내용을 동적으로 생성하고 모달 박스에서 특정 요소를 초기화하기 위해 외부 스크립트 (예 : Sharethis)를 원할 때 타이밍 문제가 종종 발생합니다. 이 기사는 Modal Box가 DOM에 완전히로드되고 렌더링 된 후 Sweetalert2가 제공하는 Didopen 또는 Didrender 수명주기 기능을 사용하는 방법을 자세히 소개합니다. 이는 외부 스크립트의 초기화가 수동으로 트리거되어 동적 컨텐츠를 올바르게 렌더링하고 요소의 실패로 인해 초기화 실패를 해결하도록합니다.

동적 컨텐츠 및 외부 스크립트 초기화의 과제

현대 웹 개발에서는 컨텐츠를 동적으로 생성하는 것이 Sweetalert2를 사용하여 대화식 모달 상자를 만드는 것과 같은 일반적인 요구 사항입니다. 그러나 이러한 동적 컨텐츠에 ShareThis Share 버튼과 같은 외부 JavaScript 라이브러리에 의해 초기화되어야하는 요소가 포함 된 경우 일반적인 타이밍 문제가 발생합니다.

예를 들어, Sharethis 등은 일반적으로 페이지가로드 될 때 DOM을 스캔하여 특정 CSS 클래스 (예 : Sharethis-inline-buttons)를 찾고 구성 요소를 렌더링합니다. 이러한 요소가 Sweetalert2 모달 박스의 일부인 경우 페이지가 처음로드 될 때 DOM에는 존재하지 않습니다. sweetalert2는 사용자가 트리거 할 때 모달 박스의 HTML 구조를 동적으로 생성합니다. 즉, Sharethis 스크립트가 초기화 로직을 실행할 때 동적으로 생성 된 요소를 찾을 수 없으므로 공유 버튼이 제대로 표시되지 않습니다.

원래 코드 시도는 다음과 같습니다.

 Sharetext =`이 웹 사이트를 공유하자.
<br>
<div class="주식 컨테이너">
<div class="Sharethis-inline-share-buttons"> </div>
</div>`;

Modal.fire ({
    titletext : "전파 및 공유",
    html : sharetext,
    아이콘 : "정보",
    배경 :`RGBA (0,0,0,0.7)`
});

이 경우, modal.fire가 호출 될 때 Sharethis-inline-share-buttons 요소가 DOM에 주입되고 Sharethis의 자동 스캐닝 메커니즘이 오래 전에 완료되었을 수 있으므로 이러한 버튼을 인식하고 초기화 할 수 없습니다.

해결책 : Sweetalert2의 수명주기 후크를 활용하십시오

Sweetalert2는 개발자가 모달 박스의 다양한 단계에서 사용자 정의 로직을 실행할 수있는 강력한 라이프 사이클 후크 기능을 제공합니다. 위의 문제를 해결하기위한 열쇠는 Didopen 또는 Didrender의 두 고리를 사용하는 것입니다.

• DIDOPEN :이 기능은 모달 박스를 열 때 동기식으로 호출됩니다 (즉, 내용물은 DOM에 완전히 주입되어 볼 수 있습니다).
• DIDRENDER :이 기능은 모달 박스가 렌더링 될 때 호출됩니다 (즉, 콘텐츠가 DOM에 주입되지만 반드시 볼 수 있거나 애니메이션이 완료되지는 않습니다).

모달 박스의 요소를 초기화 해야하는 시나리오의 경우, didopen은 DOM에 요소가 존재할뿐만 아니라 모달 박스도 사용자에게 완전히 제시되기 때문에 일반적으로 더 적절한 선택입니다.

구현 단계 및 샘플 코드

Sweetalert2 모달 상자에서 Sharethis 버튼이 렌더링되지 않는 문제를 해결하려면 Didopen 콜백 기능에서 Sharethis의 초기화 방법을 수동으로 트리거하면됩니다. Sharethis 라이브러리는 일반적으로 Window .__ ShareThis __. Initialize ()와 같은 전 세계적으로 액세스 가능한 초기화 기능을 제공합니다.

다음은 특정 구현 코드입니다.

 // Sharethis의 자리 표시자를 포함하는 모달 박스 콘텐츠 정의
<br>
<div class="주식 컨테이너">
<div class="Sharethis-inline-share-buttons"> </div>
</div>`;

// sweetalert2 modal box swal.fire 트리거 ({// sweetalert2를 가져 왔고 swal이라는 이름을 가정합니다.
    titletext : "전파 및 공유",
    html : sharetext,
    아이콘 : "정보",
    배경 :`RGBA (0,0,0,0.7)`,

    // 키 파트 : 모달 상자가 완전히 열린 후 초기화 실행 : function () {
        // Sharethis 초기화 함수가 오류를 피하기 위해 존재하는지 확인하십시오.
            Window .__ Sharethis __. 초기화 ();
            Console.log ( "Sharethis 버튼은 Sweetalert2 Modal 내부에서 초기화되었습니다.");
        } 또 다른 {
            Console.warn ( "ShareThis 초기화 함수는 찾을 수 없거나 준비되지 않습니다.");
        }
    }
});

코드 구문 분석 :

1. Sharetext : Sharethis가 인식하고 실제 버튼으로 대체 된 자리 표시자인 Sharethis-Inline-Share-Buttons 클래스가 여전히 포함되어 있습니다.
2. Swal.fire ({...}) : Modal Box를 표시하는 데 사용되는 Sweetalert2의 호출 방법.
3. didopen : function () {...} : 이것이 핵심입니다. 이 기능은 Sweetalert2 모달 박스의 HTML 함량이 DOM에 완전히 렌더링되고 삽입 될 때 실행됩니다. 현재 Sharethis-inline-share-buttons 요소는 이미 DOM에 존재합니다.
4. Window .__ ShareThis __. Initialize () : Sharethis 라이브러리가 제공하는 수동 초기화 방법입니다. DOM을 구출하고 일치하는 모든 Sharethis 자리 표시자를 찾아 실제 공유 버튼으로 대체합니다. 호출되기 전에 함수가 존재하는지 확인하기 위해 간단한 조건부 점검을 추가했습니다.

적용 가능성 및 예방 조치

• 일반적인 솔루션 :이 접근법은 Sharethis뿐만 아니라 동적으로 생성 된 컨텐츠에서 구성 요소를 초기화 해야하는 타사 라이브러리 또는 사용자 정의 JavaScript 논리를위한 것입니다. 라이브러리가 DOM을 수동으로 초기화하거나 구조하는 방법을 제공하는 한 Didopen에서 호출 할 수 있습니다.
• DIDRENDER vs DIDOPEN : 모달 박스 애니메이션이 시작되기 전에 또는 모달 박스 컨텐츠가 렌더링 된 직후 (모달 박스가 완전히 보이지 않더라도) 초기화 로직을 실행 해야하는 경우 Didrender 사용을 고려할 수 있습니다. 그러나 대부분의 사용자가 볼 수있는 UI 구성 요소의 초기화를 위해 Didopen은보다 강력한 선택입니다.
• 라이브러리 초기화 방법 : 다양한 라이브러리마다 수동 초기화 방법이 다릅니다. 올바른 API 호출을 찾으려면 관련 라이브러리 문서를 참조하십시오.
• 오류 처리 : 타사 라이브러리의 초기화 방법을 호출 할 때 라이브러리가 완전히로드되지 않았거나 API가 변경 될 때 런타임 오류를 방지하기 위해 메소드가 존재하는지 확인하기 위해 조건 검사를 추가하는 것이 가장 좋습니다.

요약

Sweetalert2에서 제공하는 Didopen 라이프 사이클 후크를 영리하게 활용함으로써 외부 스크립트가 동적으로 생성 된 모달 박스 컨텐츠를 초기화 할 수 없다는 문제를 완벽하게 해결할 수 있습니다. 이 패턴은 관련 초기화 로직이 대상 DOM 요소가 존재하고 볼 때만 트리거되도록하여 동적 컨텐츠의 올바른 렌더링과 함수의 무결성을 보장합니다. 이 기술을 마스터하는 것은 복잡하고 대화식 웹 애플리케이션을 구축하는 데 중요합니다.

위 내용은 Sweetalert2 Modal Box를로드 한 후 외부 스크립트 초기화를위한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!