2012-01-02 42 views
88

Tôi đang cố gắng đưa google.com vào 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 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ó thủ đoạn nào để làm điều đó không?Làm cách nào để hiển thị google.com trong iframe?

Tôi đã thử nó trong một cách thông thường để hiển thị một trang web trong một khung nội tuyến như thế này:

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

Các trang google.com không render trong các iframe, nó chỉ là trống. Chuyện gì vậy?

+0

Tại sao bạn cần phải chứng minh Google trong iframe không? –

+0

Đừng báo cho tôi, nhưng có lẽ Google sử dụng một cái gì đó như 'window.property' hoặc cái gì đó, trong đó, bên trong một IFrame, sẽ phá vỡ một phần của màn hình? – annonymously

+0

nếu bạn muốn thanh tìm kiếm của google thấy liên kết này: http: //www.google.com/webelements/#!/Custom-search – mgraph

Trả lời

90

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 không cho trình duyệt hiển thị iFrames không được lưu trữ trên cùng một miền với trang gốc.

Xem: Mozilla Developer Network - The X-Frame-Options response header

+10

Tôi nghĩ rằng điều này là khá vô ích. Nếu bất cứ ai có thể nghĩ ra một lý do để sử dụng tính năng đó ngoài việc chỉ có nghĩa là cảm thấy tự do để nói với tôi. – annonymously

+0

@ nặc danh nó không gây ra bất kỳ sự cố nào, khi bạn được người nào đó cho phép nhúng nội dung của họ vào máy của bạn, bạn chỉ cần yêu cầu họ thay đổi tiêu đề họ đang gửi cùng một lúc. –

+0

@JonHanna người ta không chỉ đơn giản là liên hệ với google cho bất cứ điều gì. – albert

25

CNTT phải là không thể.
Sử dụng máy chủ proxy ngược để xử lý Sự cố gốc khác. 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à viết một trang proxy đơn giản chạy trên máy chủ của chính bạn, chỉ cần yêu cầu từ Google và xuất kết quả cho máy khách.

+8

Google đã chặn các nỗ lực đơn giản của tôi khi quăn 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 tùy chọn X-Frame khác nhau. Http://www.google.com/custom?q=test&btnG=Search –

+4

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

1

Nó không lý tưởng nhưng bạn có thể sử dụng một 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 vào trong iframe và nó hoạt động!

16

Như đã được nêu ở đây, vì Google đang gửi tiêu đề phản hồi "X-Frame-Options: SAMEORIGIN", 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 khung nội tuyến, bạn có thể làm những gì người được đề 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 làm việc tuyệt vời cho tôi (trái 'q =' trống để 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> 

EDIT:

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 yếu tố tìm kiếm tùy chỉnh của google, hãy kiểm tra: https://support.google.com/customsearch/answer/2641279

+0

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

+0

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

+1

@ScottyG Kỹ thuật trên vẫn hợp lệ? Tôi đã thử bỏ dòng đó vào một trang trống và tất cả những gì tôi nhận được là một iframe trống , ngay cả khi tôi cung cấp truy vấn – Andres

1

Điều này được sử dụng để làm việc vì tôi đã sử dụng nó để tạo các tìm kiếm tùy chỉnh của Google với các tùy chọn của riêng tôi. Google thực hiện thay đổi kết thúc của họ và phá vỡ trang tìm kiếm tùy chỉnh riêng tư của tôi :(Không còn mẫu làm việc dưới đây. 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ỉ cần sử dụng Curl hoặc tương đương.

4

Bạn có thể bỏ qua X-frame-Options trong một sử dụng 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 = 'http://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 tại đây.

http://jsfiddle.net/2gou4yen/

Mã từ đây: How Can I Bypass the X-Frame-Options: SAMEORIGIN HTTP Header?

+2

không hoạt động - hãy kiểm tra xem fiddle –

+1

Điều này có hiệu quả không nhưng lần đầu tiên. trang web mà tôi đã nhúng, tôi phải nhấn làm mới để tải trang lần đầu tiên. Sau đó, nó sẽ tốt. –

Các vấn đề liên quan