จะแสดง google.com ใน iframe ได้อย่างไร

121

ฉันพยายามใส่ google.com ลงใน iframe บนเว็บไซต์ของฉันซึ่งใช้ได้กับเว็บไซต์อื่น ๆ มากมายรวมถึง yahoo แต่มันใช้ไม่ได้กับ google เพราะมันแสดง iframe เปล่า ๆ ทำไมมันไม่แสดงผล? มีเทคนิคในการทำเช่นนั้นหรือไม่?

ฉันได้ลองใช้วิธีปกติเพื่อแสดงเว็บไซต์ใน iframe เช่นนี้:

<iframe name="I1" id="if1" width="100%" 
 height="254" style="visibility:visible" 
 src="http://www.google.com"></iframe>

หน้า google.com ไม่แสดงผลใน iframe แต่จะว่างเปล่า เกิดอะไรขึ้น?

html

— บาลา
แหล่งที่มา

ทำไมคุณต้องแสดง Google ใน iframe

— Paul Alan Taylor

อย่าอ้างฉัน แต่บางที Google อาจใช้สิ่งที่เหมือนwindow.propertyหรือบางอย่างซึ่งภายใน IFrame จะทำให้ส่วนหนึ่งของการแสดงผลแตกหรือไม่

— ระบุชื่อ

หากคุณต้องการแถบค้นหาของ Google โปรดดูลิงก์นี้: google.com/webelements/#!/custom-search

— mgraph

@PaulAlanTaylor มันเป็นความต้องการของลูกค้าของฉันมีคนบอกว่าเขาต้องการแสดงผลลัพธ์ของ Google ในเว็บไซต์ของเขาที่มีประโยชน์ใน iframe

— บาลา

11

เพียงแค่ทำสิ่งนี้:<iframe src="https://www.google.com/webhp?igu=1"></iframe>

— niutech

117

เหตุผลก็คือ Google กำลังส่งส่วนหัวการตอบกลับ "X-Frame-Options: SAMEORIGIN" ตัวเลือกนี้ป้องกันไม่ให้เบราว์เซอร์แสดง iFrames ที่ไม่ได้โฮสต์บนโดเมนเดียวกับเพจหลัก

โปรดดู: Mozilla Developer Network - ส่วนหัวการตอบสนอง X-Frame-Options

— Andreas Koch
แหล่งที่มา

18

ฉันคิดว่ามันไม่มีประโยชน์เลย หากใครสามารถคิดหาเหตุผลที่จะใช้ฟีเจอร์นั้นนอกเหนือจากแค่ใจร้ายอย่าลังเลที่จะบอกฉัน

— ระบุชื่อ

15

@JonHanna one ไม่เพียงติดต่อ Google เพื่อขออะไร

— albert

23

คุณสามารถใช้ URL นี้ในiframe: google.com/search?igu=1

— niutech

1

หรือคุณสามารถใช้X-Frame-Bypass Web Component ของฉัน

— niutech

4

@niutech เหลือเชื่อ URL ของคุณที่มีพารามิเตอร์? igu = 1 ใช้งานได้ คิดว่าทำไม? วัตถุประสงค์ดั้งเดิมของตัวเลือกนั้นคืออะไร? ที่น่าสนใจนี้ทำให้ฉันแสดงว่าไม่ได้เข้าสู่ระบบแต่ช่องค้นหายังคงแนะนำการค้นหาในอดีตที่แท้จริงของฉัน ผมก็ "แบบ" ล็อกอินแปลกมาก

— Mark Thomson

28

มันเป็นไปไม่ได้
ใช้พร็อกซีเซิร์ฟเวอร์ย้อนกลับเพื่อจัดการกับ Different-Origin-Problem ฉันเคยใช้ Nginx ด้วยproxy_passเพื่อเปลี่ยน url ของเพจ คุณสามารถลอง

อีกวิธีหนึ่งคือการเขียนหน้าพร็อกซีแบบธรรมดาที่รันบนเซิร์ฟเวอร์ด้วยตัวเองเพียงแค่ขอจาก Google และส่งผลลัพธ์ไปยังไคลเอนต์

— ijse
แหล่งที่มา

8

Google บล็อกความพยายามง่ายๆของฉันในการม้วนงอ URL การค้นหามาตรฐานของพวกเขา :( ฉันลงเอยด้วยการใช้ "Google Custom" ซึ่งส่ง X-Frame-Options ที่แตกต่างกันgoogle.com/custom?q=test&btnG=Search

— Joel Mellon

7

มีการสอนเกี่ยวกับวิธีแก้ปัญหานี้ด้วย Nginx หรือไม่?

— ดำ

21

ดังที่ได้ระบุไว้ที่นี่เนื่องจาก Google กำลังส่งส่วนหัวการตอบกลับ "X-Frame-Options: SAMEORIGIN" คุณจึงไม่สามารถตั้งค่า src เป็น " http://www.google.com " ใน iframe ได้

หากคุณต้องการฝัง 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

— ScottyG
แหล่งที่มา

ขอบคุณ ScottyG! มีตัวเลือกใดบ้างในการเพิ่มผลลัพธ์รูปภาพ?

— Krzysztof Przygoda

เฮ้ Krzysztof Przygoda ฉันคิดว่าคุณสามารถบังคับให้ค้นหารูปภาพด้วย src เช่น: http://www.google.com/search?site=imghp&tbm=isch&q='searchstring'แต่เพราะมันใช้การค้นหา? และไม่กำหนดเอง? คุณจะไม่สามารถใช้มันใน iframe ได้

— ScottyG

1

@ScottyG เทคนิคข้างต้นยังใช้ได้อยู่หรือไม่? ฉันลองวางบรรทัดนั้นลงในหน้าว่างและสิ่งที่ฉันได้รับคือ iframe ว่างแม้ว่าฉันจะให้ข้อความค้นหาก็ตาม

— Andres

2

สวัสดี Andres ดูเหมือนว่าคุณจะพูดถูก ฉันไม่สามารถทำให้สิ่งนี้ทำงานให้ฉันได้อีกต่อไป ตอนนี้ลิงก์การค้นหาที่กำหนดเองเปลี่ยนเส้นทางไปยังgoogle.ca/webhp?btnG=&gws_rd=sslซึ่งบังคับให้ ssl และดูเหมือนจะถูกบล็อกใน iframe ในขณะนี้ ฉันจะตรวจสอบเรื่องนี้ต่อไป แต่ดูเหมือนว่าปาร์ตี้อาจจบลงในงานนี้ ... :(

— ScottyG

8

คุณสามารถข้าม X-Frame-Options ได้โดยใช้ YQL

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 ได้อย่างไร

— Netham
แหล่งที่มา

3

ใช้งานได้ แต่ไม่ใช่ครั้งแรก หากฉันเปิดหน้าเว็บที่ฝังไว้ฉันต้องกดรีเฟรชเพื่อโหลดหน้าเป็นครั้งแรก หลังจากนั้นจะดีเอง

— Vivek Sinha

@ TV-C-15 มันทำงานเมื่อคุณเปลี่ยนด้วยhttp://query.yahooapis.com https://query.yahooapis.com

— niutech

ทดสอบกับ codepen [ codepen.io/anon/pen/Xyqqvb]และใช้งานได้ (แม้ว่าบางครั้งต้องรีเฟรช) บน firefox, chrome, opera ไม่ทำงานบน edge แต่ถ้าฉันคัดลอกในเครื่องและฉันเปิดในเบราว์เซอร์มันยังคงดำเนินต่อไป รีโหลดหน้า.. ที่นี่สคริปต์เต็ม: [ files.fm/u/arzrb2h4]

— โจ

1

ไม่ทำงาน. มีวิธีอื่นในการเปิด google ใน iframe หรือไม่?

— กฤษณะ

3

คุณแก้ได้โดยใช้Google CSE (Custom Searche Engine) ซึ่งสามารถแทรกลงใน iframe ได้อย่างง่ายดาย คุณสามารถสร้างเครื่องมือค้นหาของคุณเองค้นหาไซต์ที่เลือกหรือในฐานข้อมูลทั้งหมดของ Google

ผลลัพธ์สามารถจัดรูปแบบได้ตามที่คุณต้องการและคล้ายกับสไตล์ของ Google Google CSE ทำงานร่วมกับการค้นหาเว็บและรูปภาพ

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>

— WalterV
แหล่งที่มา

2

สิ่งนี้เคยได้ผลเพราะฉันใช้เพื่อสร้างการค้นหาของ 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">

เว็บ

ฉันเดาว่าตัวเลือกที่ดีกว่าคือใช้ Curl หรือคล้ายกัน

— จิม
แหล่งที่มา

1

ไม่เหมาะ แต่คุณสามารถใช้พร็อกซีเซิร์ฟเวอร์และทำงานได้ดี เช่นไปที่ hidemyass.com ใส่ www.google.com แล้วใส่ลิงค์ไปใน iframe ก็ใช้ได้!

— มอนตี้
แหล่งที่มา

0

หากคุณใช้ PHP คุณสามารถใช้file_get_contents()เพื่อพิมพ์เนื้อหา:

<?php
$page = file_get_contents('https://www.google.com');
echo $page;
?>

สิ่งนี้จะพิมพ์file_get_contents()ฟังก์ชันเนื้อหาใด ๆ ก็ตามที่ได้รับใน url นี้ โปรดทราบว่าเนื่องจากคุณกำลังแสดงเนื้อหาเป็นสตริงแทนที่จะเป็นหน้าเว็บจริงสิ่งต่างๆเช่นภาพเส้นทางสัมพัทธ์จะไม่แสดงอย่างถูกต้องเนื่องจาก /img/myimg.jpg กำลังโหลดจากเซิร์ฟเวอร์ของคุณไม่ใช่จาก google.com อีกต่อไป

อย่างไรก็ตามคุณสามารถเล่นกับเทคนิคบางอย่างเช่นstr_replace()ฟังก์ชันเพื่อแทนที่ URL ที่สมบูรณ์ในรูปภาพ:

<?php
$page = file_get_contents('https://www.google.com');
echo str_replace('src="img/','src="https://google.com/img/',$page);
?>

— quakeglen
แหล่งที่มา