URL이 있는 JavaScript를 사용하여 HTML 코드 가져오기
URL이 있는 XMLHttpRequest를 사용하여 HTML의 소스 코드를 취득하려고 합니다.내가 어떻게 그럴 수 있을까?
프로그래밍은 처음이라 jQuery 없이 어떻게 해야 할지 잘 모르겠어요.
jQuery 사용:
$.ajax({ url: 'your-url', success: function(data) { alert(data); } });
이 데이터는 사용자의 HTML입니다.
jQuery(JavaScript만):
function makeHttpObject() {
try {return new XMLHttpRequest();}
catch (error) {}
try {return new ActiveXObject("Msxml2.XMLHTTP");}
catch (error) {}
try {return new ActiveXObject("Microsoft.XMLHTTP");}
catch (error) {}
throw new Error("Could not create HTTP request object.");
}
var request = makeHttpObject();
request.open("GET", "your_url", true);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4)
alert(request.responseText);
};
이를 위해 fetch를 사용할 수 있습니다.
fetch('some_url')
.then(function (response) {
switch (response.status) {
// status "OK"
case 200:
return response.text();
// status "Not Found"
case 404:
throw response;
}
})
.then(function (template) {
console.log(template);
})
.catch(function (response) {
// "Not Found"
console.log(response.statusText);
});
화살표 기능과 비동기 버전:
(async () => {
var response = await fetch('some_url');
switch (response.status) {
// status "OK"
case 200:
var template = await response.text();
console.log(template);
break;
// status "Not Found"
case 404:
console.log('Not Found');
break;
}
})();
Ajax 사용 방법에 대한 튜토리얼은 https://www.w3schools.com/xml/ajax_intro.asp에 있습니다.
이 튜토리얼에서 가져온 코드 예를 다음에 나타냅니다.
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
xmlhttp = new XMLHttpRequest();
}
else
{
// Code for Internet Explorer 6 and Internet Explorer 5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "ajax_info.txt", true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
fetch api에 문제가 있어서 텍스트가 반환되어도 항상 약속이 반환됩니다."return await response.text();"텍스트로 그 약속을 처리하려면 , 다음의 방법으로 비동기식으로 처리할 필요가 있습니다..then.
<script>
// Getting the HTML
async function FetchHtml()
{
let response = await fetch('https://address.com');
return await response.text(); // Returns it as Promise
}
// Usaing the HTML
async function Do()
{
let html = await FetchHtml().then(text => {return text}); // Get html from the promise
alert(html);
}
// Exe
Do();
</script>
외부(사이트 간) 솔루션의 경우 다음을 사용할 수 있습니다.CSS가 아닌 JavaScript를 사용하여 링크 태그의 내용을 가져옵니다.
사용하다$.ajax()jquery가 포함되어 있습니다.
우선, javascript에서 자신의 페이지와 같은 도메인에 없는 페이지의 소스 코드를 얻을 수 없다는 것을 알아야 합니다.(http://en.wikipedia.org/wiki/Same_origin_policy) 를 참조해 주세요.
PHP 에서는, 다음과 같이 합니다.
file_get_contents($theUrl);
javascript에는 다음 세 가지 방법이 있습니다.
먼저 XMLHttpRequest에 의해: http://jsfiddle.net/635YY/1/
var url="../635YY",xmlhttp;//Remember, same domain
if("XMLHttpRequest" in window)xmlhttp=new XMLHttpRequest();
if("ActiveXObject" in window)xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp.open('GET',url,true);
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)alert(xmlhttp.responseText);
};
xmlhttp.send(null);
둘째, iFrames: http://jsfiddle.net/XYjuX/1/
var url="../XYjuX";//Remember, same domain
var iframe=document.createElement("iframe");
iframe.onload=function()
{
alert(iframe.contentWindow.document.body.innerHTML);
}
iframe.src=url;
iframe.style.display="none";
document.body.appendChild(iframe);
셋째, jQuery : [http://jsfiddle.net/edggD/2/]
$.get('../edggD',function(data)//Remember, same domain
{
alert(data);
});
] 4
편집: 아직 작동하지 않습니다...
다음을 JS에 추가합니다.
var src = fetch('https://page.com')
page.com의 소스를 변수 'src'에 저장합니다.
언급URL : https://stackoverflow.com/questions/6375461/get-html-code-using-javascript-with-a-url
'source' 카테고리의 다른 글
| 오브젝트가 비어 있는지 확인하고 컨트롤러에서 ng-show로 동작하지 않는지 확인합니다. (0) | 2023.03.18 |
|---|---|
| ngRepeat inside angularjs 디렉티브의 $index (0) | 2023.03.18 |
| 각도에서의 $window.location.replace를 조롱하는 방법JS 유닛 테스트? (0) | 2023.03.18 |
| 봄 JUnit:자동 배선 구성 요소에서 자동 배선 구성 요소를 모의하는 방법 (0) | 2023.03.18 |
| JavaScript 개체를 통해 루프하는 모범 사례 (0) | 2023.03.18 |