Bagaimana cara menampilkan google.com dalam iframe?

121

Saya mencoba memasukkan google.com ke dalam iframe di situs saya, ini berfungsi dengan banyak situs lain termasuk yahoo. Tetapi itu tidak berfungsi dengan google karena hanya menampilkan iframe kosong. Mengapa tidak dirender? Apakah ada trik untuk melakukan itu?

Saya sudah mencobanya dengan cara biasa untuk menampilkan situs web dalam iframe seperti ini:

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

Halaman google.com tidak merender di iframe, hanya kosong. Apa yang sedang terjadi?

html Bala
sumber
Mengapa Anda perlu menampilkan Google dalam iframe?
Paul Alan Taylor
Jangan mengutip saya, tetapi mungkin Google menggunakan sesuatu seperti window.propertyatau sesuatu, yang, di dalam IFrame, akan merusak sebagian tampilan?
anonim
jika Anda ingin bilah pencarian google lihat tautan ini: google.com/webelements/#!/custom-search
mgraph
@PaulAlanTaylor Itu adalah persyaratan klien saya, dikatakan bahwa dia ingin menampilkan hasil google di situs webnya dalam bentuk iframe.
Bala
11
Lakukan saja ini:<iframe src="https://www.google.com/webhp?igu=1"></iframe>
niutech

Jawaban:

117

Alasannya adalah, Google mengirimkan header tanggapan "X-Frame-Options: SAMEORIGIN". Opsi ini mencegah browser menampilkan iFrame yang tidak dihosting di domain yang sama dengan halaman induk.

Lihat: Jaringan Pengembang Mozilla - Header tanggapan X-Frame-Options

Andreas Koch
sumber
18
Saya pikir ini sangat tidak berguna. Jika ada yang bisa memikirkan alasan untuk menggunakan fitur itu selain hanya bersikap kejam, silakan beri tahu saya.
anonim
15
@JonHanna one tidak hanya menghubungi google untuk apa pun.
albert
23
Anda dapat menggunakan URL ini di iframe: google.com/search?igu=1
niutech
1
Atau Anda dapat menggunakan Komponen Web X-Frame-Bypass saya .
niutech
4
@niutech Luar biasa, URL Anda dengan parameter? igu = 1 berfungsi. Tahu kenapa? Apa tujuan awal dibalik opsi itu? Menariknya, hal ini menyebabkan saya ditampilkan sebagai belum masuk, tetapi bidang penelusuran masih menunjukkan beberapa penelusuran historis saya yang sebenarnya. Jadi saya "agak" masuk. Sangat aneh.
Mark Thomson
28

ITU TIDAK MUNGKIN.
Gunakan server proxy terbalik untuk menangani Masalah Asal-Berbeda. Saya dulu menggunakan Nginx dengan proxy_passuntuk mengubah url halaman. Anda bisa mencoba.

Cara lain adalah dengan menulis halaman proxy sederhana yang dijalankan di server sendiri, cukup minta dari Google dan keluarkan hasilnya ke klien.

ijse
sumber
8
Google memblokir upaya sederhana saya untuk menggulung url pencarian standar mereka. :( Saya akhirnya menggunakan "Google Custom" yang mengirimkan X-Frame-Options yang berbeda. Google.com/custom?q=test&btnG=Search
Joel Mellon
7
Apakah ada tutorial tentang cara mengatasi masalah ini dengan Nginx?
Black
21

Seperti yang telah dijelaskan di sini, karena Google mengirimkan header tanggapan "X-Frame-Options: SAMEORIGIN", Anda tidak dapat begitu saja menyetel src ke " http://www.google.com " dalam iframe.

Jika Anda ingin menyematkan Google ke dalam iframe, Anda dapat melakukan apa yang sudopeople sarankan dalam komentar di atas dan menggunakan tautan pencarian khusus Google seperti berikut. Ini bekerja sangat baik untuk saya (kiri 'q =' kosong untuk memulai dengan pencarian kosong).

<iframe id="if1" width="100%" height="254" style="visibility:visible" src="http://www.google.com/custom?q=&btnG=Search"></iframe>

EDIT:

Jawaban ini tidak lagi berfungsi. Untuk informasi, dan petunjuk tentang cara mengganti pencarian iframe dengan elemen pencarian kustom Google, lihat: https://support.google.com/customsearch/answer/2641279

ScottyG
sumber
Thx ScottyG! Apakah ada pilihan untuk menambahkan hasil gambar?
Krzysztof Przygoda
Hai Krzysztof Przygoda Saya pikir Anda dapat memaksa pencarian gambar dengan src seperti: http://www.google.com/search?site=imghp&tbm=isch&q='searchstring'tetapi karena itu menggunakan pencarian? dan bukan kebiasaan? Anda tidak akan dapat menggunakannya dalam iframe
ScottyG
1
@ScottyG Apakah teknik di atas masih valid? Saya mencoba menjatuhkan baris itu ke halaman kosong dan yang saya dapatkan hanyalah iframe kosong, bahkan ketika saya memberikan kueri
Andres
2
Hai Andres, sepertinya Anda benar. Saya tidak bisa lagi membuat ini bekerja untuk saya. Tautan penelusuran ubahsuaian sekarang dialihkan ke google.ca/webhp?btnG=&gws_rd=ssl yang memaksa ssl dan tampaknya diblokir dalam iframe sekarang. Saya akan terus menyelidiki ini tetapi sepertinya pesta yang satu ini mungkin berakhir ... :(
ScottyG
8

Anda dapat melewati X-Frame-Options dengan menggunakan 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>

Jalankan di sini: http://jsfiddle.net/2gou4yen/

Kode dari sini: Bagaimana Saya Bisa Bypass X-Frame-Options: SAMEORIGIN HTTP Header?

Netham
sumber
3
Ini berfungsi tetapi tidak untuk pertama kalinya. Jika saya membuka halaman web yang telah saya sematkan, saya harus menekan segarkan untuk memuat halaman untuk pertama kalinya. Setelah itu akan bagus.
Vivek Sinha
@ TV-C-15 Ini berfungsi saat Anda mengganti http://query.yahooapis.comdengan https://query.yahooapis.com.
niutech
diuji juga pada codepen [ codepen.io/anon/pen/Xyqqvb] dan berfungsi (meskipun kadang-kadang perlu menyegarkan) di firefox, chrome, opera, tidak berfungsi di edge TETAPI jika saya menyalin secara lokal dan saya membuka browser, itu terus berlanjut muat ulang halaman..di sini skrip lengkapnya: [ files.fm/u/arzrb2h4]
Joe
1
tidak bekerja. Apakah ada cara lain untuk membuka Google di iframe?
Krishna
3

Anda dapat menyelesaikannya menggunakan Google CSE (Custom Searche Engine), yang dapat dengan mudah dimasukkan ke dalam iframe. Anda dapat membuat mesin pencari Anda sendiri, yang mencari situs yang dipilih atau juga di seluruh database Google.

Hasilnya bisa diberi gaya sesuka Anda, juga mirip dengan gaya Google. Google CSE bekerja dengan web dan pencarian gambar.

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
sumber
2

Ini digunakan untuk bekerja karena saya menggunakannya untuk membuat pencarian Google kustom dengan pilihan saya sendiri. Google membuat perubahan pada akhirnya dan merusak halaman pencarian kustomisasi pribadi saya :( Contoh tidak lagi berfungsi di bawah ini. Ini sangat berguna untuk pola pencarian yang kompleks.

<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">

web

Saya kira pilihan yang lebih baik adalah dengan hanya menggunakan Curl atau serupa.

jim
sumber
1

Ini tidak ideal tetapi Anda dapat menggunakan server proxy dan berfungsi dengan baik. Misalnya, buka hidemyass.com, taruh di www.google.com dan masukkan tautan ke dalam iframe dan berhasil!

Monty
sumber
0

Jika Anda menggunakan PHP, Anda dapat menggunakan file_get_contents()untuk mencetak konten:

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

Ini akan mencetak file_get_contents()fungsi konten apa pun yang ada di url ini. Harap perhatikan bahwa karena Anda menampilkan konten sebagai string dan bukan sebagai laman web yang sebenarnya, hal-hal seperti gambar jalur relatif tidak ditampilkan dengan benar, karena /img/myimg.jpg sekarang dimuat dari server Anda dan bukan dari google.com lagi.

Namun, Anda dapat bermain dengan beberapa trik seperti str_replace()fungsi untuk mengganti url absolut dalam gambar:

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