Tôi làm cách nào để đặt chiều rộng tùy chỉnh trên iframe tìm kiếm của Google?

Question

Tôi cố gắng để sử dụng tìm kiếm google cho trang web của tôi:

http://www.houseofhawkins.com/search.php

Nó không phải là chơi đẹp với một số độ phân giải màn hình. Đây là mã được cung cấp từ google:

<div id="cse-search-results"></div> 
<script type="text/javascript"> 
    var googleSearchIframeName = "cse-search-results"; 
    var googleSearchFormName = "cse-search-box"; 
    var googleSearchFrameWidth = 250; 
    var googleSearchDomain = "www.google.com"; 
    var googleSearchPath = "/cse"; 
</script> 
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script> 

Tôi đã thay đổi "googleSearchFrameWidth" xuống 250 suy nghĩ nên đặt chiều rộng bằng px, (bắt đầu bằng 600). Nhưng với màn hình nhỏ hơn (1024 * 768) nó dính ra bên cạnh các div của tôi.

Tôi có làm điều gì đó ngu ngốc không?

Answer 1

Rắc rối vào cùng một sự cố bạn muốn thay đổi kích thước iFrame. Bạn sẽ nghĩ rằng việc thay đổi giá trị googleSearchFrameWidth sẽ thực hiện thủ thuật, nhưng không.

Vì vậy, tôi đã sử dụng thao tác DOM. Kể từ khi tên của iFrame là "googleSearchFrame", Ngay sau khi tham khảo

<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script> 

, tôi đã thêm một <script> thẻ như sau:

<script type="text/javascript"> 
    document.getElementsByName('googleSearchFrame').item(0).width = 600; 
</script> 

Các bộ trên chiều rộng của iFrame tại 600px. Trong trường hợp của bạn, rõ ràng, bạn muốn đặt nó thành 250. Nếu bạn hoang tưởng rằng Google có thể thay đổi tên iFrame một ngày nào đó, chỉ cần đi với phương thức getElementsByTagName('iFrame') và thu hẹp nó xuống vị trí của iFrame của bạn trong tài liệu (nếu bạn có nhiều iFrame).

Answer 2

Tôi có ba thiết lập mà bạn có thể tinh chỉnh, một sự kết hợp của mà tôi hy vọng sẽ đưa bạn đến nơi bạn cần phải đi:

1. googleSearchFrameWidth - Cài đặt này trong hoạt Javascript để chiều rộng mong muốn của bạn. Đây là một trong những rõ ràng nhất và một trong những bạn đã có thể đã được tinh chỉnh.
2. Chiều rộng của cse-search-results div - Sử dụng câu lệnh kiểu nội tuyến (ví dụ: style ="width:500") để đặt chiều rộng của div.
3. Đặt kiểu IFrame - Nếu bạn kiểm tra, có thể bạn sẽ nhận thấy rằng tất cả nội dung này đang được hiển thị từ Google qua IFrame. Đây là một chút khó khăn hơn để tinh chỉnh nhưng doable. Để thực hiện việc này, hãy thêm tuyên bố vào cuối biểu định kiểu của bạn, chẳng hạn như #cse-search-results iframe { }, bao gồm kiểu iframe thực tế trong dấu ngoặc vuông.

Tôi hy vọng một trong những kết hợp này sẽ chứng tỏ là câu trả lời cho bạn. Khi nghi ngờ, hãy sử dụng trình kiểm tra DOM, chẳng hạn như trình kiểm tra có sẵn trong Firebug để phân tích tác động của các thay đổi của bạn trên DOM. Hi vọng điêu nay co ich.

Answer 3

Google sẽ không cho phép bạn sử dụng chiều rộng nhỏ hơn 500px. Tốt nhất là để tạo ra một phong cách cho iframe:

<style> 
#cse-search-results iframe {width: 200px; } 
</style> 

Answer 4

bước dễ dàng để thay đổi googleSearchFrameWidth trong trang web của bạn:

1. TẢI của riêng bạn tập tin 'show_afs_search.js' từ http://www.google.com/afsonline/show_afs_search.js và tiết kiệm nó trong cùng một thư mục nơi bạn có bạn results.htm trang web.

2. Mở kết quả của bạn.htm trang web và sửa đổi mã dòng thành tập lệnh ... src = "http://www.google.com/afsonline/show_afs_search.js" TO: src = "show_afs_search.js"

3. Mở riêng tập tin 'show_afs_search.js' của bạn và thay đổi chiều rộng thiết lập: a để width: "600" (hoặc bất cứ điều gì bạn muốn thiết lập chiều rộng bằng pixel) và tiết kiệm 'show_afs_search.js' của riêng bạn tập tin.

4. Tải lên cả tập tin vào trang web lưu trữ của bạn tại cùng thư mục: results.htm và show_afs_search.js'

DONE!

Answer 5

CẬP NHẬT 22/06/10 - Tìm thấy giải pháp đơn giản bên dưới. Thay đổi giá trị FORID trong mã thành FORID: 11. Do đó một dòng bạn mã sẽ trông giống như thế này:

<input type="hidden" name="cof" value="FORID:11;NB:1" /> 

---

Hãy thử chỉ thêm

#cse-search-results iframe {width: 100%;} 

trong CSS của bạn.

Answer 6

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<script type="text/javascript"> 
 
\t $(document).ready(function() { 
 
\t \t $("iframe[name='googleSearchFrame']").css("width","100%"); 
 
\t }); 
 
</script>