자바스크립트를 사용하여 요소에 HTML의 큰 덩어리를 삽입하는 모범 사례는 무엇입니까?
저는 HTML의 큰 덩어리를 DOM에 추가해야 하는 웹 애플리케이션(프로토타입 사용)을 구축하고 있습니다.대부분의 행은 모든 형식의 속성을 가진 요소를 포함합니다.
현재 나는 변수에 HTML의 빈 행을 보관하고 있습니다.
var blankRow = '<tr><td>'
+'<a href="{LINK}" onclick="someFunc(\'{STRING}\');">{WORD}</a>'
+'</td></tr>';
function insertRow(o) {
newRow = blankRow
.sub('{LINK}',o.link)
.sub('{STRING}',o.string)
.sub('{WORD}',o.word);
$('tbodyElem').insert( newRow );
}
이제 그것은 모두 잘 작동하고 멋집니다. 하지만 이것이 최선의 방법일까요?
페이지에서 코드를 업데이트할 때 빈 행의 코드를 업데이트해야 하므로 삽입되는 새 요소는 동일합니다.빈 행에 40줄 정도의 HTML을 넣고 탈출해야 할 때는 형편없어집니다.
더 쉬운 방법이 있습니까?url 인코딩을 하고 나서 삽입하기 전에 디코딩하는 것을 생각하고 있었지만 여전히 빈 Row와 많은 탈출을 의미합니다.
의미하는 것은 a 함수 aa PHP 등일 것입니다.
$blankRow = <<<EOF
text
text
EOF;
그러면 탈출할 수 없지만 빈 행이 필요합니다.
이 상황에서 당신은 무엇을 합니까?
해결된
프로토타입에 DOM Builder를 사용하게 되었습니다.다른 라이브러리가 필요하지 않았습니다.
$w('a div p span img table thead td th tr tbody tfoot input').each(function(e) {
window['$' + e] = function() {
return new Element(e, arguments[0]);
}
});
newPart = $div({id: 'partition-4'})
.insert( $p()
.insert('<b>Stuff</b>')
)
.insert( $p({
id: 'a-p'})
.insert('<b>More stuff</b>')
);
$('parentDiv').insert(newPart);
그것이 가장 좋은 방법입니까?
아닙니다. 실제로 HTML 주입 문제로 인해 버그가 발생하고 주입된 문자열에 사용자가 제출한 콘텐츠가 포함될 수 있는 최악의 경우 XSS 보안 구멍이 발생합니다.
일반 텍스트 내용 및 속성 값을 HTML 문자열에 넣을 때 HTML 인코딩을 수행해야 합니다.PHP에서, 당신은 전화해야 합니다.htmlspecialchars()
HTML로 입력하는 문자열에서.기능이되어 있지 이스케이핑 기능을 사용하여s.replace(/&/g, '&').replace(/</g, '<').replace(/"/g, '"')
HTML에 입력되는 문자열에 있습니다.
="some Func(\'{STRING}\')"를 클릭합니다."
그것은 완전히 새로운 차원의 혼란 탈출입니다.속성 리터럴에서 JS", "JS", "JS")을 JS 인코딩해야 .\
- 재 - 는밌escaping는'
그리고.\
완전성을 위해 유니코드 문자 몇 개를 추가한 다음 결과를 HTML로 인코딩합니다.그렇지 않으면 문자열이 문자열-문자 구분 기호를 벗어나 임의의 JS 코드를 주입할 수 있습니다.모든 경우에 인라인 이벤트 핸들러 특성을 사용하지 않도록 합니다. 특히 템플릿을 사용할 때는 더욱 그렇습니다.
HTML 문자열로 페이지 내용을 작성하는 것은 최악입니다.이스케이프 오류가 발생할 가능성이 매우 높고 응용프로그램의 보안을 손상시킬 수 있습니다.대신 DOM과 같은 방법을 사용하면 이에 대해 걱정할 필요가 없습니다.jQuery를 사용하는 것 같으니 jQuery 1.4 요소 만들기 바로 가기를 사용해 보십시오.
$('<tr>').append(
$('<td>').append(
$('<a>', {
href: o.link,
text: o.word,
onclick: function() {
someFunc(o.string);
}
})
)
);
또는 빈 행을 실제로 HTML로 문서 내부에 유지한 다음 숨깁니다.display: none
) 또는 시작 시 문서에서 분리(removeChild
or jQuerydetach
그런 다음 새 행을 원할 때 빈 행을 복제하고 필요한 내용을 변경합니다.
var blankRow= $('#blankRow').detach();
...
var newRow= blankRow.clone();
var link= newRow.find('td>a');
link.attr('href': o.link);
link.text(o.word);
link.click(function() {
someFunc(o.string);
});
문자열 템플릿에서 내용을 만들어야 하는 경우 템플릿 기능이 기본적으로 모든 대체 항목을 HTML로 이스케이프하도록 하고, 구문 분석된 내용 내에서 호출할 노드를 선택하여 이벤트를 첨부합니다.click(function() { ... })
on. 또는 이벤트 위임(예: jQuery)을 사용live()
추가 시 새 노드에 바인딩할 필요 없이 이벤트를 처리합니다.
당신은 좋은 방법으로 그것을 하고, 다른 매너를 고려하면 그것은 꽤 빠릅니다.
다른, 아마도 깨끗한 솔루션은 여러 개를 호출하여 사용할 DOM 요소를 자바스크립트로 구축하는 것입니다.
document.createElement(tagName);
하지만 당신의 코드는 빠르게 성장할 것입니다, 제 생각에는, 헛수고입니다.
DOM 생성을 달성하기 위한 또 다른 방법은 복사할 코드를 HTML 본문 안에 넣고 className 및/또는 "template"와 같은 ID를 지정하여 추가로 숨긴 다음 요소를 다시 가져와 복제함으로써 이벤트에서 필요에 따라 처리하는 것입니다.속성이 속한 위치를 추가하기 전에 원하는 속성을 설정합니다.
내가 당신을 잘 이해한다면, 당신의 질문은 당신이 PHP(또는 펄)에서 할 방법으로 큰 문자열을 초기화하는 것입니까?긴(다중 회선) 문자열의 경우 사용:
var blankRow = [
'a line',
'another line',
'still more lines',
'lines lines lines',
'... etc'
].join('')
백슬래시를 사용하여 계속 진행할 수도 있지만, 이 경우 다음과 같은 문제가 발생할 수 있습니다.
var blankRow = 'a line\
another line\
still more lines\
lines lines lines\
... etc';
주석을 기준으로 편집:저도 게을러요!탈출을 위해 이걸 사용합니다.
function qs(str){
str = str || this || '';
return "'"+str+"'";
}
function qd(str){
str = str || this || '';
return '"'+str+'"';
}
String.prototype.qs = qs;
String.prototype.qd = qd;
// applied:
var blankRow = [
'a line',
'another '+qd('line'),
'still more lines',
'lines '+'lines'.qs()+ ' lines',
'... etc'
].join('');
게으른 것의 문제: 게으른 것을 지속하는 것은 꽤 힘든 일입니다.
언급URL : https://stackoverflow.com/questions/2839844/best-practice-for-inserting-large-chunks-of-html-into-elements-with-javascript
'programing' 카테고리의 다른 글
ngFor in Angular를 사용하여 개체 속성을 루프오버하는 방법 (0) | 2023.08.16 |
---|---|
ProxySQL: 페일오버를 구성하는 방법은 무엇입니까? (0) | 2023.08.16 |
C의 인수 목록에서 ...은 무엇을 의미합니까? (0) | 2023.08.16 |
jquery cycle IE7 투명 png 문제 (0) | 2023.08.16 |
Spring@Scheduled에 시간대를 제공하시겠습니까? (0) | 2023.08.16 |