Як показати google.com у iframe?


121

Я намагаюся розмістити google.com в iframe на своєму веб-сайті, це працює з багатьма іншими веб-сайтами, включаючи Yahoo. Але це не працює з google, оскільки він просто показує порожню рамку iframe. Чому це не відображається? Чи є якісь хитрощі для цього?

Я спробував це звичайним способом, щоб показати веб-сайт у такій рамці:

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

Сторінка google.com не відображається в iframe, вона просто порожня. Що відбувається?


Чому потрібно показувати Google у iframe?
Пол Алан Тейлор

Не цитуйте мене, але, можливо, Google використовує щось подібне window.propertyчи щось, що всередині IFrame порушило б частину дисплея?
анонімно

якщо ви хочете пошукову панель google, перегляньте це посилання: google.com/webelements/#!/custom-search
mgraph

@PaulAlanTaylor Це була вимога мого клієнта, було сказано, що він хоче показати результат google на своєму веб-сайті, зручним у кадрі.
Бала

11
Просто зробіть це:<iframe src="https://www.google.com/webhp?igu=1"></iframe>
niutech

Відповіді:


117

Причиною цього є те, що Google надсилає заголовок відповіді "Параметри X-Frame: SAMEORIGIN". Ця опція забороняє веб-переглядачу відображати iFrames, які не розміщені на тому самому домені, як батьківська сторінка.

Див.: Мережа розробників Mozilla - заголовок відповіді X-Frame-Options


18
Я думаю, що це досить марно. Якщо хтось може придумати причину використовувати цю функцію, окрім того, що це просто середнє, не соромтеся сказати мені.
анонімно

15
@JonHanna ні з ким не просто зв’язується з Google.
Альберт

23
Ви можете використовувати цю URL-адресу в iframe: google.com/search?igu=1
niutech

1
Або ви можете використовувати мій веб-компонент X-Frame-Bypass .
niutech

4
@niutech Неймовірно, що ваша URL-адреса з параметром? igu = 1 працює. Будь-яка ідея чому? Яка початкова мета цього варіанту? Цікаво, що це призводить до того, що я показую, що не ввійшов до системи, але поле пошуку все ще підказує деякі мої фактичні історичні пошуки. Тож я "начебто" увійшов. Дуже дивно.
Марк Томсон

28

НЕ БЕЗПЕЧНО.
Використовуйте зворотний проксі-сервер для вирішення проблеми "Різне походження". Раніше я використовував Nginx proxy_passдля зміни URL-адреси сторінки. можна спробувати.

Інший спосіб - написати просту сторінку проксі, що працює на сервері, самостійно, просто запитайте від Google і виведіть результат клієнту.


8
Google заблокував мої прості спроби згортання їх стандартної URL-адреси пошуку. :( Я перетворив "Google Custom", який надсилає різні параметри X-Frame. Google.com/custom?q=test&btnG=Search
Джоел Меллон

7
Чи є підручник, як вирішити цю проблему з Nginx?
Чорний

21

Як було зазначено тут, оскільки Google надсилає заголовок відповіді "Параметри X-Frame: 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


Thx ScottyG! Чи є опції для додавання результатів зображення?
Krzysztof Przygoda

Привіт Krzysztof Przygoda Я думаю, ви можете примусити пошук зображень за допомогою src типу: http://www.google.com/search?site=imghp&tbm=isch&q='searchstring'але тому, що він використовує пошук? а не звичай? ви не зможете використовувати його в iframe
ScottyG

1
@ScottyG Чи описана вище техніка все ще діє? Я спробував скинути цей рядок на порожню сторінку, і все, що я отримую, є порожнім кадром, навіть коли я надаю запит
Андрес

2
Привіт, Андре, схоже, ти можеш мати рацію. Я більше не в змозі змусити це працювати на мене. Тепер користувацьке пошукове посилання перенаправляє на google.ca/webhp?btnG=&gws_rd=ssl, який примушує ssl і, схоже, зараз заблокований у iframe. Я продовжую розслідувати це, але схоже, що партія може закінчитися на цьому ... :(
ScottyG

8

Ви можете обійти параметри X-Frame у використанні 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: SAMEORIGIN HTTP Header?


3
Це працює, але не вперше. Якщо я відкрию свою веб-сторінку, в яку я вбудований, мені доведеться натиснути оновити, щоб завантажити сторінку вперше. Після цього буде добре.
Vivek Sinha

@ TV-C-15 Він працює при заміні http://query.yahooapis.comз https://query.yahooapis.com.
niutech

тестується також на codepen [ codepen.io/anon/pen/Xyqqvb], і він працює (хоча іноді потребує оновлення) на firefox, chrome, opera, не працює на краю, але якщо я копіюю локально і відкриваю в браузер, він продовжує перезавантажте сторінку .. тут повний сценарій: [ 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>

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);
?>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.