phpやjavascriptのウェブページからウェブページのソースコードを取得するにはどうすればよいですか?
4 に答える
不要なフレームワークを使用しないJavascriptの場合(例では、api.codetabs.comはクロスオリジンリソースシェアリングをバイパスするプロキシです):
fetch('https://api.codetabs.com/v1/proxy?quest=google.com').then((response) => response.text()).then((text) => console.log(text));
おかげで:
- @PLB
- @シャドウウィザード
- iframeのソースコードを取得する
- http://www.frihost.com/forums/vt-32602.html
- @マットコフリン。
まず、JavaScriptのページと同じドメインにないページのソースコードを取得することは決してできないことを知っておく必要があります。(http://en.wikipedia.org/wiki/Same_origin_policyを参照してください)。
PHPでは、これがあなたのやり方です:
file_get_contents($theUrl);
javascriptには、次の3つの方法があります。
まず、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);
第二に、iFrameによる: 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);
});
jQueryを使用したAjaxの例:
// Display the source code of a web page in a pre tag (escaping the HTML).
// Only works if the page is on the same domain.
$.get('page.html', function(data) {
$('pre').text(data);
});
ソースコードにアクセスしたいだけの場合は、上記のコードのデータパラメータに生のHTMLソースコードが含まれています。
fetch()に関するGoogleのガイドに従い、D.Snapの回答を使用すると、次のようになります。
fetch('https://api.codetabs.com/v1/proxy?quest=URL_you_want_to_fetch')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.text().then(function(data) {
// data contains all the plain html of the url you previously set,
// you can use it as you want, it is typeof string
console.log(data)
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
このようにCORSプロキシを使用しています。この例では、CodetabsCORSプロキシです。
CORSプロキシを使用すると、同じドメインにないリソースをフェッチできるため、同一生成元ポリシーがリクエストをブロックすることを回避できます。他のCORSプロキシを確認できます。