2016-10-21 2 views
0

다른 개발자가 작성한 웹 사이트에 사용자의 사용자 이름을 사용하여 전자 메일 주소로 서식을 지정하는 전자 메일 변환기가 있습니다. 페이지 [[사용자 이름]]을 입력하면 웹 페이지에서 클릭 할 수있는 이메일 주소가 생성됩니다. [email protected]document.body.innerHTML 문제

이제 PayPal의 Skip to accessibility navigation을 웹 사이트에 통합하려고합니다. Pay Pal 코드를 추가 한 후 탭을 누르면 왼쪽 상단에 "건너 뛰기"링크가 나타나지만 링크가 작동하지 않습니다. 드롭 다운 메뉴가 나타나지 않는다는 의미입니다. 내 자바 스크립트 이메일 변환기의 https://github.com/paypal/skipto

는 코드 라인

document.body.innerHTML = emailConvert (document.body.innerHTML)이있다;

페이팔 코드도 innerHTML 코드를 사용하고 있기 때문에 이것이 문제인 것처럼 보입니다. 이 특정 코드 줄 또는 모든 코드에 대한 솔루션을 찾고 있는데

document.body.innerHTML = emailConvert (document.body.innerHTML);

결과가없는 다양한 솔루션을 시도했습니다. 어떤 도움이라도 좋을 것입니다. 다음은 코드입니다.

$(document).ready(function() { 
    (function() { 
    var domains = { 'n': 'gmail.com', 'p': 'yahoo.com', 's': 'comcast.net', 'k': 'att.net', 'b': 'aol.com', 'i': 'sbcglobal.net' }; 
    function renderEmail(str, user, domain, text) { 
     var email = (user.match(/@/)) ? user : user + "@" + (domain || domains["n"]); 
     if (domains[user.toLowerCase()]) { email = domain + "@" + domains[user.toLowerCase()]; } 
     return " <a href='mailto:" + email + "?Subject=" + document.title + "\"'>" + (text || email) + "</a>"; 
    } 
    function emailConvert(source) { return source.replace(/\[\[\s*([^\ [\,\|]*)\|?\s*([a-zA-Z0-9_\.-]+)?\s*()\]\]/g, renderEmail).replace(/\[\[\s*([^\[\,\|]*)\|?\s*([a-zA-Z0-9_\.-]+)?\s*\,{1}\s*([^\]]*)\s*\]\]/g, renderEmail); } 
    document.body.innerHTML = emailConvert(document.body.innerHTML); 
    $.fn.emailConverter = function() { this.innerHTML = emailConvert($(this).html(emailConvert($(this).html()))); } 
})(); 

});

+0

Nevermind, 방금 편집 한 것을 봅니다. - 편집기에서 코드를 선택한 다음 도구 모음에서 코드 아이콘 (대괄호 아이콘 : {})을 클릭하면 더 쉽게 읽을 수 있습니다. – Kevin

+0

감사합니다 케빈 !! – nicban

답변

1

innerHTML은 요소 내에서 HTML의 문자열 표현을 제공합니다. HTML로 표현되지 않았으므로 해당 요소에 프로그래밍 방식으로 연결된 이벤트 핸들러를 캡처하지 않습니다.

innerHTMLdocument.body으로 덮어 쓰지 마십시오. 그것은 비서에게 무언가를 쓰라고 말하고, 대신 책상 위의 모든 것을 움켜 잡고 창 밖으로 내린 다음 원하는 메모를 바탕 화면에서 직접 스크 롤합니다. 비서가 책상 위의 전화기에 대해 매우 정확한 그림을 그렸다고 할지라도 그것이 작동하지 않으면 놀랄 필요가 없습니다.

좋아, 완전히 은유가 아니지만 희망을 갖고 내 뜻을 얻는다.

대신 수정하려는 특정 HTML 요소를 찾고 원하는 위치에 새 HTML 요소를 삽입해야합니다.

document.getElementById, document.querySelector, document.querySelectorAlldocument.getElementsByTagName 같이 페이지에서 기존 요소를 잡을 수있는 다른 방법이 많이있다. 또한 페이지의 모든 요소를 ​​철저하게 검사하려면 document.body의 자식 노드로 드릴 다운 할 수 있습니다.

마찬가지로 HTML 요소를 선택한 후에는 HTML을 appendChildinsertAdjacentHTML을 포함하여 여러 가지 방법으로 삽입 할 수 있습니다. 특정 요소의 innerHTML을 계속 조작 할 수 있지만 특히 자식 노드에 이벤트 수신기가있는 경우 포함될 수있는 모든 자식 노드를 덮어 쓰는 것에주의해야합니다.