iframe에 google.com을 표시하는 방법?
내 웹 사이트의 iframe에 google.com을 넣으려고하는데 yahoo를 포함한 다른 많은 웹 사이트에서 작동합니다. 그러나 빈 iframe 만 표시하므로 Google에서는 작동하지 않습니다. 왜 렌더링되지 않습니까? 그렇게 할 트릭이 있습니까?
다음과 같이 iframe에 웹 사이트를 표시하는 일반적인 방법으로 시도했습니다.
<iframe name="I1" id="if1" width="100%"
height="254" style="visibility:visible"
src="http://www.google.com"></iframe>
google.com 페이지는 iframe에서 렌더링되지 않으며 비어 있습니다. 무슨 일이야?
그 이유는 Google이 "X-Frame-Options : SAMEORIGIN"응답 헤더를 보내고 있기 때문입니다. 이 옵션은 브라우저가 상위 페이지와 동일한 도메인에서 호스팅되지 않은 iFrame을 표시하지 못하게합니다.
참조 : Mozilla 개발자 네트워크-X-Frame-Options 응답 헤더
불가능하지 않습니다.
역방향 프록시 서버를 사용하여 Different-Origin-Problem을 처리하십시오. Nginx를 사용하여 proxy_pass페이지의 URL을 변경했습니다. 시도해 볼 수 있습니다.
또 다른 방법은 간단한 프록시 페이지를 서버에서 직접 작성하여 Google에 요청하여 결과를 클라이언트에 출력하는 것입니다.
여기에 요약 된 바와 같이, Google이 "X-Frame-Options : SAMEORIGIN"응답 헤더를 전송하기 때문에 iframe에서 src를 " http://www.google.com "으로 간단하게 설정할 수 없습니다 .
Google을 iframe에 포함하려면 위의 의견에서 sudopeople이 제안한 것을 수행하고 다음과 같은 Google 맞춤 검색 링크를 사용할 수 있습니다. 이것은 나를 위해 훌륭했습니다 (공백 검색으로 시작하려면 왼쪽 'q ='공백).
<iframe id="if1" width="100%" height="254" style="visibility:visible" src="http://www.google.com/custom?q=&btnG=Search"></iframe>
편집하다:
이 답변은 더 이상 작동하지 않습니다. iframe 검색을 Google 맞춤 검색 요소로 바꾸는 방법에 대한 정보 및 지침은 https://support.google.com/customsearch/answer/2641279를 참조하십시오.
YQL을 사용하여 X-Frame-Options를 무시할 수 있습니다.
var iframe = document.getElementsByTagName('iframe')[0];
var url = iframe.src;
var getData = function (data) {
if (data && data.query && data.query.results && data.query.results.resources && data.query.results.resources.content && data.query.results.resources.status == 200) loadHTML(data.query.results.resources.content);
else if (data && data.error && data.error.description) loadHTML(data.error.description);
else loadHTML('Error: Cannot load ' + url);
};
var loadURL = function (src) {
url = src;
var script = document.createElement('script');
script.src = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20data.headers%20where%20url%3D%22' + encodeURIComponent(url) + '%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=getData';
document.body.appendChild(script);
};
var loadHTML = function (html) {
iframe.src = 'about:blank';
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html.replace(/<head>/i, '<head><base href="' + url + '"><scr' + 'ipt>document.addEventListener("click", function(e) { if(e.target && e.target.nodeName == "A") { e.preventDefault(); parent.loadURL(e.target.href); } });</scr' + 'ipt>'));
iframe.contentWindow.document.close();
}
loadURL(iframe.src);
<iframe src="http://www.google.co.in" width="500" height="300"></iframe>
여기에서 실행하십시오 : http://jsfiddle.net/2gou4yen/
여기의 코드 : X-Frame-Options : SAMEORIGIN HTTP Header를 우회하는 방법은 무엇입니까?
이상적이지는 않지만 프록시 서버를 사용할 수 있으며 정상적으로 작동합니다. 예를 들어 www.google.com에있는 hidemyass.com으로 이동하여 링크를 iframe에 넣으면 작동합니다!
이것은 내 옵션으로 맞춤 Google 검색을 만드는 데 사용했기 때문에 작동했습니다. Google은 최종적으로 변경하여 개인 맞춤 검색 페이지를 중단했습니다. (더 이상 샘플이 작동하지 않습니다. 복잡한 검색 패턴에 매우 유용했습니다.
<form method="get" action="http://www.google.com/search" target="main"><input name="q" value="" type="hidden"> <input name="q" size="40" maxlength="2000" value="" type="text">
편물
I guess the better option is to just use Curl or similar.
You can solve using Google CSE (Custom Searche Engine), which can be easily inserted into an iframe. You can create your own search engine, that search selected sites or also in entire Google's database.
The results can be styled as you prefer, also similar to Google style. Google CSE works with web and images search.
google.php
<script>
(function() {
var cx = 'xxxxxxxxxxxxxxxxxxxxxx';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>
yourpage.php
<iframe src="google.php?q=<?php echo urlencode('your query'); ?>"></iframe>
참고URL : https://stackoverflow.com/questions/8700636/how-to-show-google-com-in-an-iframe
'program tip' 카테고리의 다른 글
| 트위터 부트 스트랩과 jquery-mobile (0) | 2020.08.05 |
|---|---|
| 힘내 diff-diff 목록을 종료하는 방법 (0) | 2020.08.04 |
| Google 인증 API 액세스 토큰을 확인하려면 어떻게합니까? (0) | 2020.08.04 |
| Array_merge (0) | 2020.08.04 |
| 레지스터 자체를 XOR하는 목적은 무엇입니까? (0) | 2020.08.04 |