Como posso definir uma largura personalizada no meu Google procurar iframe?

Question

Eu estou tentando usar pesquisa no Google para o meu site:

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

Ele não está jogando agradável com algumas resoluções de tela. Aqui está o código fornecido pelo 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>

Eu mudei a down "googleSearchFrameWidth" a 250 pensamento que deve ser definir a largura em px, (era 600 para começar). Mas com telas menores (1024 * 768) que sobressai do lado do meu divs.

Estou fazendo algo estúpido?

Answer 1

correu para o mesmo problema que você tinha querendo redimensionar a iFrame. Você acha que a alteração do valor googleSearchFrameWidth faria o truque, mas não tinha.

Então, eu recorreu à manipulação DOM. Desde o nome do iFrame é "googleSearchFrame", logo após o

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

referência, I adicionado um outro tag <script> com o seguinte:

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

Os conjuntos acima da largura do iFrame no 600px. No seu caso, obviamente, que você gostaria de configurá-lo para 250. Se você é paranóico que o Google pode alterar o nome iFrame algum dia, basta ir com o método getElementsByTagName('iFrame') e reduzi-lo para a posição do seu iFrame no documento (se você tiver vários iFrames).

Answer 2

Eu tenho três configurações que você pode ajustar, uma combinação de que, espero, vai chegar onde você precisa ir:

1. googleSearchFrameWidth - Definir isso no JavaScript à sua largura desejada. Este é o óbvio mais eo que você provavelmente já alterados.
2. Largura da CSE-de resultados de pesquisa div -. Use uma declaração de estilo inline (por exemplo style ="width:500") para definir a largura da div
3. definir o estilo de IFrame - Se você verificar, você provavelmente vai notar que todo esse conteúdo está sendo processado pelo Google através de um IFrame. Isto é um pouco mais difícil de ajustar, mas factível. Para fazer isso, adicionar uma declaração para o fim da sua folha de estilo, como #cse-search-results iframe { }, incluindo o estilo iframe real dentro dos colchetes.

Espero que um destes ou uma combinação destes prova ser a resposta para você. Em caso de dúvida, use um inspetor DOM como aquele disponível no Firebug para analisar o impacto de suas mudanças no DOM. Espero que isso ajude.

Answer 3

Atualização 22/06/10 - encontrado uma solução mais simples que abaixo. Alterar o FORID valor no no código para FORID: 11 . Portanto uma linha do seu código deve ser semelhante a esta:

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

---

Tente apenas adicionando

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

no seu CSS.

Answer 4

Fácil passos para modificar o googleSearchFrameWidth em seu site:

1. Fazer download de arquivo dos seus próprios show_afs_search.js 'de http://www.google.com /afsonline/show_afs_search.js e salve-o no mesmo diretório onde você tem você results.htm página.

2. Abra sua página results.htm e modificar o código de linha no script ... src = "http://www.google.com/afsonline/show_afs_search.js" TO: src = "show_afs_search.js"

3. Open próprio arquivo de seu 'show_afs_search.js' e modificar a largura definição: a para width: "600" (Ou o que você deseja definir a largura em pixels) e salvar o seu próprio arquivo 'show_afs_search.js'.

4. Carregar ambos os arquivos para o seu site de hospedagem no mesmo diretório: results.htm e show_afs_search.js'

FEITO!

Answer 5

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

Answer 6

O Google não permitem que você use uma largura menor do que 500px. Sua melhor aposta é para criar um estilo para o iframe:

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