JavaScript 문서입니다.AJAX를 사용할 경우 Write가 모든 본문 컨텐츠를 대체합니다.
나는 지정된 URL의 내용을 검색하여 페이지에 쓰는 간단한 아약스 호출을 만들고 있습니다.제가 가지고 있는 문제는 전체 신체 내용을 이 정보로 대체한다는 것입니다.
JS는 다음과 같습니다.
(function(){
var mb = window.mb = {};
function get_ad(url, parameters){
var result = "";
var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
var avers = ["Microsoft.XmlHttp", "MSXML2.XmlHttp", "MSXML2.XmlHttp.3.0", "MSXML2.XmlHttp.4.0", "MSXML2.XmlHttp.5.0"];
for (var i = avers.length -1; i >= 0; i--) {
try {
http_request = new ActiveXObject(avers[i]);
if (http_request){
break;
}
} catch(e) {}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = function(){
if (http_request.readyState == 4) {
if (http_request.status == 200) {
gen_output(http_request.responseText);
} else {
alert('Error');
}
}
}
http_request.open('GET', url + parameters, true);
http_request.send(null);
}
function gen_output(ad_content){
document.write("<div id=\"mb_ad\">");
document.write(ad_content);
document.write("</div>");
}
get_ad("http://localhost/test/test.html", "");
})();
그리고 html은 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
i am text before <br/>
<script type="text/javascript" src="mb.js"></script>
<br />
i am text after
</body>
</html>
Firebug를 사용하여 검사합니다. 이전 텍스트나 이후 텍스트를 볼 수 없습니다. 단지<div id="mb_ad">test.dll 페이지의 내용을 참조하십시오.아약스 호출을 제거하고 3번만 하면 됩니다.document.writes앞뒤 텍스트가 제대로 표시됩니다. jQuery는 옵션이 아닙니다. 크기와 속도가 중요하기 때문에 큰 라이브러리의 도움 없이 해야 합니다.
사용할 수 없습니다.document.write문서 로드가 완료되면 표시됩니다.이 경우, 브라우저는 현재 문서를 대체하는 새 문서를 엽니다.
사용innerHTML요소 내부에 HTML 코드를 넣는 속성:
function gen_output(ad_content){
document.getElementById('mb_ad').innerHTML = ad_content;
}
요소를 스크립트 앞에 배치하여 콜백 함수가 호출될 때 요소가 존재하는지 확인합니다.
i am text before
<div id="mb_ad"></div>
i am text after
<script type="text/javascript" src="mb.js"></script>
스크립트가 있는 문서에는 아무 것도 기록되지 않으므로 스크립트를 배치하는 위치는 크게 중요하지 않습니다.
원격 스크립트를 제어할 수 없는 경우 다음과 같은 내용을 작성할 수 있습니다.
<script>
var tmp = document.write;
document.write = function () {
document.getElementById('someId').innerHTML = [].concat.apply([], arguments).join('');
};
</script>
<script .....>
document.write = tmp;
음, 끔찍한 해킹이지만 효과가 있는 것 같아요...
var div = document.createElement('div');
div.id = 'mb_ad';
div.innerHTML = ad_content;이제 원하는 위치에 이 노드를 추가할 수 있습니다.
사용할 수 있습니다.<script>document.body.innerHTML+="//Your HTML Code Here";</script>
동일한 Leon Fedotov 답변이지만 더 많은 jQuery
{
var old_write = document.write;
var $zone = $('.zone.zone_' + name);
// redefine document.write in this closure
document.write = function () {
$zone.append([].concat.apply([], arguments).join(''));
};
// OA_output[name] contains dangerous document.write
$zone.html(OA_output[name]);
document.write = old_write;
}
다음 코드에서도 같은 문제가 발생했습니다.
$html[] = '<script>
if($("#mf_dialogs").length == 0) {
document.write("<div id=\"mf_dialogs\"></div>");
}
</script>';
다음 코드가 문서를 대체합니다.효율적으로 쓰기:
$html = '<div id="dialogHolder"></div>
<script>
if($("#mf_dialogs").length == 0) {
document.getElementById("dialogHolder").innerHTML="<div id=\"mf_dialogs\"></div>";
}
</script>';
당신이 모방할 수 있는 방법.document.writesomething은 다음 코드입니다.
<script>
(function(script) {
var parent = script.parentNode;
var node = document.createTextNode('Surprise!');
parent.replaceChild(node, script);
})(document.currentScript);
</script>
이런 식으로 당신은 임의의 HTML을 대신할 수 있습니다.script원소의스크립트를 다른 태그로 감쌀 수 있는 것처럼 간단한 경우에는 훨씬 더 간단한 버전을 수행할 수 있습니다.
<script>
document.currentScript.parentElement.innerHTML = 'Surprise!';
</script>
언급URL : https://stackoverflow.com/questions/2360076/javascript-document-write-replaces-all-body-content-when-using-ajax
'source' 카테고리의 다른 글
| Android에서 날짜와 시간을 포맷하는 방법은 무엇입니까? (0) | 2023.07.24 |
|---|---|
| 하위 쿼리를 사용하여 SQL 쿼리를 변환하는 방법을 선택합니다.NET Core 쿼리 (0) | 2023.07.24 |
| Oracle: 하나의 필드를 업데이트하는 동안 행 복사 (0) | 2023.07.24 |
| FlatButton 클릭 시 AlertDialog를 해제하는 방법은 무엇입니까? (0) | 2023.07.19 |
| 선택을 사용하여 쿼리 결과에 행 추가 (0) | 2023.07.19 |