문서를 사용하는 HTML에 javascript를 동적으로 삽입합니다.글을 쓰다
저는 현재 XHR 콜에서 HTML로 로드하는 라이트박스 스타일 팝업을 로드하고 있습니다.이는여을 '로다다로gsa'npsn이ldtd는'여을'lelement.innerHTML = content이게 매력적으로 느껴지네요.
이 웹사이트의 다른 섹션에서 저는 플리커 이미지를 동적으로 로드하기 위해 플리커 '파일럿'(http://www.elliotswan.com/2006/08/06/custom-flickr-badge-api-documentation/) 을 사용합니다.이것은 flickr javascript를 로드하는 스크립트 태그를 포함하여 수행되며, 이는 다음으로 일부를 수행합니다.document.write
HTML에 포함되면 둘 다 완벽하게 동작하며 라이트박스 안에 flickr badge code를 로드할 때만 콘텐츠가 전혀 렌더링되지 않습니다.를 사용하는 것 같습니다.innerHTML를 쓰다document.write문장이 너무 멀리 가고 있지만 이 동작의 자바스크립트 구현(FF2&3, IE6&7)에서 단서를 찾을 수 없습니다.
이것이 작동해야 하는지 아닌지 누가 명확히 해줄 수 있습니까?감사해요.
를 사용하는 경우 .HTML. 당신의 경우, 이것이 좋은 이유는document.write전화하면 이미 페이지에 있는 모든 것이 지워질 겁니다.◦ HTML 문서가없습니다.가 추가되기로되어 .글이 추가되기로 되어 있었습니다.
를 위해 jQuery HTML로 입니다.document.writeHTML을 적절한 장소에 가져올 수 있습니다.이것이 충분히 간단하다면 다음과 같은 것이 가능합니다.
var content = '';
document.write = function(s) {
content += s;
};
// execute the script
$('#foo').html(markupWithScriptInIt);
$('#foo .whereverTheDocumentWriteContentGoes').html(content);
근데 복잡해지잖아요.스크립트가 다른 도메인에 있는 경우에는 비동기적으로 로드되므로 컨텐츠를 가져올 때까지 기다려야 합니다.또한 쉽게 선택할 수 있는 래퍼 요소 없이 HTML을 프래그먼트 중간에 쓰기만 하면 어떨까요? writeCapture.js (전체 공개:제가 작성했습니다) 이 모든 문제를 처리합니다.그냥 사용하는 것을 추천하지만, 적어도 코드를 보면 모든 것을 어떻게 처리하는지 알 수 있습니다.
편집: 원하는 효과를 보여주는 페이지입니다.
문제를 설명하는 간단한 테스트 페이지를 만들었습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Document Write Testcase</title>
</head>
<body>
<div id="container">
</div>
<div id="container2">
</div>
<script>
// This doesn't work!
var container = document.getElementById('container');
container.innerHTML = "<script type='text/javascript'>alert('foo');document.write('bar');<\/script>";
// This does!
var container2 = document.getElementById('container2');
var script = document.createElement("script");
script.type = 'text/javascript';
script.innerHTML = "alert('bar');document.write('foo');";
container.appendChild(script);
</script>
</body>
</html>
이 페이지는 '바'에 경고하고 '푸'를 인쇄하며, '푸'에 경고하고 '바'를 인쇄할 것으로 예상했습니다.하지만 불행하게도, 그 이후로script태그는 더 큰 HTML 페이지의 일부이므로 위의 예처럼 태그를 선택하여 추가할 수 없습니다.음, 할 수는 있지만 스캔이 필요할 겁니다innerHTML에 만족하는script태그, 문자열에서 플레이스홀더로 대체한 다음 DOM을 사용하여 삽입합니다.그렇게 사소하게 들리진 않군요.
사용하다document.writeln(content);대신에document.write(content).
그러나 더 나은 방법은 다음의 연결을 사용하는 것입니다.innerHTML, 다음과 같이:
element.innerHTML += content;
그element.innerHTML = content;method가 이전 컨텐츠를 새 컨텐츠로 대체하여 요소의 내부 HTML을 덮어씁니다!
반면에.+=오퍼레이터 인element.innerHTML += content는 이전 내용 뒤에 텍스트를 추가합니다.(무엇과 유사함)document.write합니다.)
document.write그들이 오는 만큼 더 이상 사용하지 않을 겁니다.하지만 자바스크립트의 놀라운 점들 덕분에 당신은 당신만의 기능을 그냥 할당할 수 있습니다.write의 방법document사용하는 물건innerHTML제공된 내용을 추가하기로 선택한 요소에 대해 설명합니다.
Can I get some clarification first to make sure I get the problem?
document.write호출은 그들이 발생하는 마크업의 지점에서 마크업에 내용을 추가할 것입니다.예를 들어 다음을 포함하는 경우document.write함수를 호출하지만 다른 곳에서 함수를 호출합니다.document.write출력은 마크업의 한 지점에서 발생할 것입니다 함수는 그것이 불리는 곳이 아니라 정의됩니다.
따라서 이 기능이 모든 Flickr에서 작동합니다.document.write성명서는 다음의 일부가 될 필요가 있을 것입니다.content인에element.innerHTML = content. 이런 경우가 확실한가요?
이 작업이 단일 작업과 단순 작업을 추가하여 작동하는지 여부를 빠르게 테스트할 수 있습니다.document.write로 설정된 내용을 호출합니다.innerHTML그리고 이것이 무엇을 하는지 확인합니다.
<script>
var content = "<p>1st para</p><script>document.write('<p>2nd para</p>');</script>"
element.innerHTML = content;
</script>
만약 그게 통한다면, 그 개념은document.write다음과 같이 설정된 컨텐츠에서 작업innerHTML어떤 요소가 효과가 있을지도 모릅니다.
My gut feeling is that it won't work, but it should be pretty straightforward to test the concept.
그럼 DOM 메소드를 사용하여script요소를 기존 요소에 추가하면 추가된 내용의script실행할 요소?좋아요.
You say that the script tag is part of a larger HTML page and therefore cannot be singled out. Can you not give the script tag an ID and target it? I'm probably missing something obvious here.
In theory, yes, I can single out a script tag that way. The problem is that we potentially have dozens of situations where this occurs, so I am trying to find some cause or documentation of this behavior.
.script태그가 로드된 후 더 이상 DOM의 일부가 아닌 것 같습니다.에서 나의 container div요서는를올수다는다수evh올st는i는yv를scripttag.tag의 작동해야 . 그러나 위의 예제에서는 스크립트가 실행되지 않지만 여전히 DOM의 일부이기 때문에 작동해야 합니다.
언급URL : https://stackoverflow.com/questions/53945/dynamically-inserting-javascript-into-html-that-uses-document-write
'sourcecode' 카테고리의 다른 글
| XML, HTML 및 XHTML 문서에 유효한 내용 유형 (0) | 2023.09.10 |
|---|---|
| 오류 2002(HY000):소켓 '/var/lib/mysql/mysql'을(를) 통해 로컬 MySQL 서버에 연결할 수 없습니다.sock' (111 "연결 거부") centos 6 (0) | 2023.09.10 |
| Java용 LINQ 도구 (0) | 2023.09.10 |
| 공백까지 데이터를 선택하시겠습니까? (0) | 2023.09.10 |
| 팬더는 날짜의 히스토그램을 그릴 수 있습니까? (0) | 2023.09.10 |