Làm cách nào để hiển thị google.com trong iframe?


121

Tôi đang cố gắng đặt google.com thành iframe trên trang web của mình, điều này hoạt động với nhiều trang web khác bao gồm cả yahoo. Nhưng nó không hoạt động với google vì nó chỉ hiển thị một iframe trống. Tại sao nó không hiển thị? Có bất kỳ thủ thuật để làm điều đó?

Tôi đã thử theo cách thông thường để hiển thị trang web trong iframe như sau:

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

Trang google.com không hiển thị trong iframe, nó chỉ trống. Điều gì đang xảy ra?


Tại sao bạn cần hiển thị Google trong iframe?
Paul Alan Taylor

Đừng trích dẫn tôi, nhưng có thể google sử dụng một cái gì đó tương tự window.propertyhoặc một cái gì đó, bên trong IFrame, sẽ làm hỏng một phần của màn hình?
danh

nếu bạn muốn thanh tìm kiếm của google, hãy xem liên kết này: google.com/webelements/#!/custom-search
mgraph

@PaulAlanTaylor Đó là yêu cầu của khách hàng của tôi, người ta nói rằng anh ta muốn hiển thị kết quả google trên trang web của mình trong iframe.
Bala

11
Chỉ cần làm điều này:<iframe src="https://www.google.com/webhp?igu=1"></iframe>
niutech

Câu trả lời:


117

Lý do cho điều này là Google đang gửi tiêu đề phản hồi "X-Frame-Options: SAMEORIGIN". Tùy chọn này ngăn trình duyệt hiển thị iFrame không được lưu trữ trên cùng một miền với trang mẹ.

Xem: Mạng nhà phát triển Mozilla - Tiêu đề phản hồi X-Frame-Options


18
Tôi nghĩ rằng điều này là khá vô ích. Nếu bất cứ ai có thể nghĩ ra lý do để sử dụng tính năng đó ngoài việc chỉ là xấu tính, hãy nói cho tôi biết.
danh

15
@JonHanna một người không chỉ liên hệ với google cho bất cứ điều gì.
albert

23
Bạn có thể sử dụng URL này trong iframe: google.com/search?igu=1
niutech

1
Hoặc bạn có thể sử dụng Thành phần Web X-Frame-Bypass của tôi .
niutech

4
@niutech Thật đáng kinh ngạc, URL của bạn với tham số? igu = 1 hoạt động. Bất kỳ ý tưởng tại sao? Mục đích ban đầu đằng sau lựa chọn đó là gì? Thật thú vị, điều này khiến tôi hiển thị là chưa đăng nhập, nhưng trường tìm kiếm vẫn gợi ý một số tìm kiếm lịch sử thực tế của tôi. Vì vậy, tôi "loại" đăng nhập. Rất lạ.
Mark Thomson

28

NÓ KHÔNG PHẢI LÀ KHÔNG THỂ.
Sử dụng máy chủ proxy ngược để xử lý Vấn đề-Nguồn gốc khác nhau. Tôi đã từng sử dụng Nginx với proxy_passđể thay đổi url của trang. bạn có thể thử.

Một cách khác là bạn viết một trang proxy đơn giản chạy trên máy chủ, chỉ cần yêu cầu từ Google và xuất kết quả cho máy khách.


8
Google đã chặn những nỗ lực đơn giản của tôi trong việc bẻ cong url tìm kiếm chuẩn của họ. :( Tôi đã kết thúc bằng cách sử dụng "Google Custom" để gửi các X-Frame-Options khác nhau. Google.com/custom?q=test&btnG=Search
Joel Mellon

7
Có một hướng dẫn về cách giải quyết vấn đề này với Nginx không?
Đen

21

Như nó đã được trình bày ở đây, vì Google đang gửi tiêu đề phản hồi "X-Frame-Options: SAMEORIGIN" nên bạn không thể chỉ cần đặt src thành " http://www.google.com " trong iframe.

Nếu bạn muốn nhúng Google vào iframe, bạn có thể thực hiện những gì mà sudopeople đã đề xuất trong nhận xét ở trên và sử dụng liên kết tìm kiếm tùy chỉnh của Google như sau. Điều này rất hiệu quả đối với tôi (để trống 'q =' để bắt đầu với tìm kiếm trống).

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

BIÊN TẬP:

Câu trả lời này không còn hoạt động. Để biết thông tin và hướng dẫn về cách thay thế tìm kiếm iframe bằng phần tử tìm kiếm tùy chỉnh của google, hãy xem: https://support.google.com/customsearch/answer/2641279


Thx ScottyG! Có tùy chọn nào để thêm kết quả hình ảnh không?
Krzysztof Przygoda

Này Krzysztof Przygoda Tôi nghĩ bạn có thể buộc tìm kiếm hình ảnh với một src như: http://www.google.com/search?site=imghp&tbm=isch&q='searchstring'nhưng vì nó sử dụng tìm kiếm? và không tùy chỉnh? bạn sẽ không thể sử dụng nó trong iframe
ScottyG

1
@ScottyG Kỹ thuật trên có còn hiệu lực không? Tôi đã thử thả dòng đó vào một trang trống và tất cả những gì tôi nhận được là một khung nội tuyến trống, ngay cả khi tôi cung cấp một truy vấn
Andres

2
Xin chào Andres, có vẻ như bạn có thể đúng. Tôi không còn có thể làm điều này để làm việc cho tôi. Liên kết tìm kiếm tùy chỉnh hiện chuyển hướng đến google.ca/webhp?btnG=&gws_rd=ssl , liên kết này buộc ssl và dường như bị chặn trong iframe ngay bây giờ. Tôi sẽ tiếp tục điều tra vấn đề này nhưng có vẻ như bữa tiệc có thể kết thúc vào ngày này ... :(
ScottyG

8

Bạn có thể bỏ qua X-Frame-Options trong một YQL bằng cách sử dụng.

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>

Chạy nó ở đây: http://jsfiddle.net/2gou4yen/

Mã từ đây: Làm cách nào tôi có thể bỏ qua X-Frame-Options: SAMEORIGIN HTTP Header?


3
Nó đang hoạt động nhưng không phải lần đầu tiên. Nếu tôi mở trang web của mình mà tôi đã nhúng, tôi phải nhấn làm mới để tải trang lần đầu tiên. Sau đó sẽ tốt.
Vivek Sinha

@ TV-C-15 Nó hoạt động khi bạn thay thế http://query.yahooapis.combằng https://query.yahooapis.com.
niutech 21/11/18

cũng đã thử nghiệm trên codepen [ codepen.io/anon/pen/Xyqqvb] và nó hoạt động (mặc dù đôi khi yêu cầu làm mới) trên firefox, chrome, opera, không hoạt động trên edge NHƯNG nếu tôi sao chép cục bộ và tôi mở vào trình duyệt, nó vẫn tiếp tục tải lại trang..đây có tập lệnh đầy đủ: [ files.fm/u/arzrb2h4]
Joe

1
không làm việc. Có cách nào khác để mở google trong iframe không?
Krishna,

3

Bạn có thể giải quyết bằng cách sử dụng Google CSE (Custom Searche Engine), có thể dễ dàng chèn vào iframe. Bạn có thể tạo công cụ tìm kiếm của riêng mình, tìm kiếm các trang web đã chọn hoặc trong toàn bộ cơ sở dữ liệu của Google.

Kết quả có thể được tạo kiểu tùy thích, cũng tương tự như kiểu Google. Google CSE hoạt động với tìm kiếm web và hình ảnh.

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

Điều này từng hoạt động vì tôi đã sử dụng nó để tạo các tìm kiếm tùy chỉnh trên Google với các tùy chọn của riêng tôi. Google đã thực hiện các thay đổi từ phía họ và phá vỡ trang tìm kiếm tùy chỉnh riêng tư của tôi :( Mẫu bên dưới không còn hoạt động nữa. Nó rất hữu ích cho các mẫu tìm kiếm phức tạp.

<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

Tôi đoán lựa chọn tốt hơn là chỉ sử dụng Curl hoặc tương tự.


1

Nó không lý tưởng nhưng bạn có thể sử dụng máy chủ proxy và nó hoạt động tốt. Ví dụ: truy cập hidemyass.com đặt trong www.google.com và đặt liên kết mà nó đi đến trong iframe và nó hoạt động!


0

Nếu bạn đang sử dụng PHP, bạn có thể sử dụng file_get_contents()để in nội dung:

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

Thao tác này sẽ in bất kỳ hàm nội dung nào file_get_contents()có trong url này. Xin lưu ý rằng vì bạn đang hiển thị nội dung dưới dạng chuỗi thay vì một trang web thực tế, những thứ như hình ảnh đường dẫn tương đối không được hiển thị chính xác, bởi vì /img/myimg.jpg hiện đang tải từ máy chủ của bạn chứ không phải từ google.com nữa.

Tuy nhiên, bạn có thể chơi một số thủ thuật như str_replace()chức năng thay thế các url tuyệt đối trong hình ảnh:

<?php
$page = file_get_contents('https://www.google.com');
echo str_replace('src="img/','src="https://google.com/img/',$page);
?>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.