JSONP를 사용하여 JavaScript로 URL 웹 페이지의 소스 코드 받기

JSONP를 사용하여 URL 웹 페이지의 소스 코드를 가져 오려고합니다.JSONP를 사용하여 JavaScript로 URL 웹 페이지의 소스 코드 받기

<script type="text/javascript"> 
var your_url = ''; 

$(document).ready(function(){ 
jQuery.ajax = (function(_ajax){ 

var protocol = location.protocol, 
    hostname = location.hostname, 
    exRegex = RegExp(protocol + '//' + hostname), 
    YQL = 'http' + (/^https/.test(protocol)?'s':'') + '://query.yahooapis.com/v1/public/yql?callback=?', 
    query = 'select * from html where url="{URL}" and xpath="*"'; 

function isExternal(url) { 
    return !exRegex.test(url) && /:\/\//.test(url); 
} 

return function(o) { 

    var url = o.url; 

    if (/get/i.test(o.type) && !/json/i.test(o.dataType) && isExternal(url)) { 
     // Manipulate options so that JSONP-x request is made to YQL 

     o.url = YQL; 
     o.dataType = 'json'; 

     o.data = { 
      q: query.replace(
       '{URL}', 
       url + (o.data ? 
        (/\?/.test(url) ? '&' : '?') + jQuery.param(o.data) 
       : '') 
      ), 
      format: 'xml' 
     }; 

     // Since it's a JSONP request 
     // complete === success 
     if (!o.success && o.complete) { 
      o.success = o.complete; 
      delete o.complete; 
     } 

     o.success = (function(_success){ 
      return function(data) { 

       if (_success) { 
        // Fake XHR callback. 
        _success.call(this, { 
         responseText: data.results[0] 
          // YQL screws with <script>s 
          // Get rid of them 
          .replace(/<script[^>]+?\/>|<script(.|\s)*?\/script>/gi, '') 
        }, 'success'); 
       } 

      }; 
     })(o.success); 

    } 

    return _ajax.apply(this, arguments); 

}; 

})(jQuery.ajax); 

$.ajax({ 
    url: your_url, 
    type: 'GET', 
    success: function(res) { 
     var text = res.responseText; 
     //document.getElementById("contenuto").innerHTML = text; 

    alert(text); 
} 
}); 


}); 
</script>

내가 URL에서, 경고와 함께 모든 소스 코드를 인쇄 : 이것은 코드입니다.

alert(text);

먼저 인쇄 된 코드가 페이지의 모든 웹 코드인지 확인하는 방법은 무엇입니까?

\ \ <'+'/ins>\ \ \ '); } ]]>

나는이 방법

document.getElementById("contenuto").innerHTML = text; 
var elem = text.getElementById("strip_adv").innerHTML; 
document.getElementById("contenuto_1").innerHTML = elem; 

}

에서하고, 하나 개의 요소를 인쇄하는 HTML의 DOM을 사용하려고 :이 방법을 수행하려고하면 는

document.getElementById("contenuto").innerHTML = text;

이 결과입니다

하지만 JS 콘솔의 오류입니다.

text.getElementById is not a function

요점 정리 : JSONP를 사용하여 URL에서 웹 페이지의 소스 코드를 얻고 싶습니다. 반환 된 텍스트에서 HTML DOM을 사용하여 필요한 요소/클래스 만 유지합니다. 저는 JS에 초보자입니다. JS에 대해 더 많이 알기를 원합니다. &.

출처

2016-07-22 Jackie

는'responsetext'가 요소 아닌 iframe을 내부에 HTML 문자열을 삽입 한 후 HTML은 다음과 같습니다 말할 수 있습니다. 그것을 파싱해야합니다. – mok

@mok이 코드를 사용하여 인쇄하려고하면 document.getElementById ("contenuto"). innerHTML = text; 결과는 다음과 같습니다. [screen1] (https://postimg.org/image/erjvgz9s7/) 왜? 먼저 전체 "문자열"(페이지의 소스 코드)을 인쇄하여 완성되었는지 확인합니다. 그러나 나는 할 수 없다. – Jackie

코드가 페이지를 제대로 구문 분석하지 않는 것 같습니다. 이것 [http://www.murgaboots.com/aboutus.html]과 같은 단순한 페이지로 시도해보십시오 (단순한 웹 페이지로 무작위로 선택). 어쨌든, 대답은 내가 전에 말했던 것입니다, 당신은'responsetext'를 분석해야합니다. – mok

getElementById()는 문서 개체에만 있습니다. 당신이하려고하는 것은 문자열 객체로부터 getElementId에 접근하려고 시도하는 것입니다.

대신 i 프레임에 반환 된 html 문자열을 삽입하고 iframe 내의 요소에 액세스 할 수 있습니다. 그렇지 않으면 응용 프로그램에서 일종의 html 파서를 사용할 수 있습니다.

는

<body> 
    <iframe id="one"> 
     <html> 
     <body> <h1 id="strip_adv">Heading</h1> </body> 
     </html 
    </iframe> 
</body> 

function iframeObj(frameEle) { 
    return frameEle.contentWindow 
     ? frameEle.contentWindow.document 
     : frameEle.contentDocument 
} 

var element = iframeObj(document.getElementById('strip_adv'));

출처

2016-07-22 09:17:35 Umamaheswaran

이것은 당신이 나에게 말한 것처럼하는 일입니다. [화면 1] (https://postimg.org/image/rqb5gvzaf/) 후 하는 1-2sec [화면 2] (https://postimg.org/image/erjvgz9s7/) – Jackie

임 미안 해요 만들 수 없습니다 그 이미지들에서 아무것도 꺼내. jsfiddle을 만들 수 있습니까? 그 방법으로도 도움이 될 것입니다 – Umamaheswaran

[jsfiddle] (https://jsfiddle.net/1opcanpg/1/). jsfiddle을 처음 사용하는 경우 ... – Jackie

JSONP를 사용하여 JavaScript로 URL 웹 페이지의 소스 코드 받기

답변

관련 문제