El script de contenido de Chrome Extension antepuesto al cuerpo no funciona correctamente

Tengo una secuencia de comandos de contenido para una extensión del navegador Google Chrome en la que estoy trabajando e inyecta una barra horizontal en la parte superior de cualquier página web en la que se encuentre el usuario. El problema es que cuando navego a google.com, la barra de navegación de Google aparece sobre mi barra. Aquí está el código antepuesto 

$("body").prepend("<iframe class='toolbar' src='http://localhost/toolbar.php' />");

Así es como se supone que debe verse:

Un sitio web en el que funciona la barra de herramientas

Y así es como se ve en google.com El problema que surge cuando el contenido se antepone a google. Como puede ver, la barra de navegación de Google se superpone con mi barra

Estoy probando diferentes enfoques, si soluciono el problema antes que nadie, lo publicaré. Cualquier ayuda/orientación es muy apreciada. ¡Gracias!

preguntado el 29 de julio de 12 a las 00:07

Lo que podría hacer es envolver toda la página en un div position: relative; top: 20px; /*or whatever height your bar is*/ luego anteponga su barra. Eso desviaría la página web real hacia abajo, incluso si algunos elementos se colocan de forma absoluta (ya que no se colocarán de forma absoluta dentro del div, en lugar del cuerpo) y colocaría la barra sobre la página web. Dime si esta es la respuesta y la publico. -

PD: ese archivo no existe en mi computadora; tal vez, si lo anterior no funciona, ¿podría publicar su código? -

Mmm, gran idea. Lo probé, pero desafortunadamente no obtuve resultados. Esto es lo que hice. $("cuerpo").prepend("localhost/barra de herramientas.php' /> "); $("cuerpo").append(" "); -

Es más simple que eso: intente $("body").wrapInner("<div class='website'></div>").prepend("<iframe class='toolbar' src='localhost/toolbar.php'></iframe>");. Eso debería hacer el truco. -

Te das cuenta de que esto es para lo que es el espacio a continuación, ¿verdad? -

4 Respuestas

$(function(){
    setTimeout(function(){
        $("your html").prependTo('body');
        $("body > :not('#panDiv')").css({position:'relative',top:'23px'});
    },1000);
}); //end $

Espero que este sea bueno.

Respondido 31 ago 12, 07:08

¡Funcionó perfectamente! Muchísimas gracias. ¿Podría quizás explicar por qué esto funciona? ¡Gracias de nuevo! - frankie nwafili

$("cuerpo> :no (#pandiv)").css({posición:'relativo',superior:'23'}); significa tomar todo el cuerpo con todos los marcos y controles excepto #pandiv y ponerles la regla de la hoja de estilo: position:relative; arriba: 23px; - kirill shur

Pruebe algo como lo siguiente:

//select the body
$("body")
//wrap the content in a div
.wrapInner("<div class='website'></div>")
//prepend the iframe to the body
.prepend("<iframe class='toolbar' src='http://localhost/toolbar.php'></iframe>");

Avísame si no puedes hacer que esto funcione.

Respondido 29 Jul 12, 01:07

Si elimino la parte wrapInner, el iframe se muestra pero con el problema original de no empujar hacia abajo la barra de navegación de Google. Si uso esta solución con la parte wrapInner, la página se empuja hacia abajo y hay espacio para mi barra, pero no aparece. Configuré la altura y el ancho de manera adecuada, pero fue en vano: frankie nwafili

Desafortunadamente, no estoy seguro de poder ayudar, no sin acceso a todo el código o un JSFiddle. ¿Alguna posibilidad de que puedas proporcionar uno? - clarkeychico

@FrankieNwafili: Una posibilidad: puede haber un error en el JS. ¿Puede verificar las herramientas de desarrollo de Firebug o Chrome y ver si hay algún error de JS? También puede poner un http:// al comienzo del iframe src; ese es probablemente su problema, ahora que lo pienso. - clarkeychico

Como sospechaba, si lo prueba en la página jQuery wrapInner, el iFrame en realidad intenta cargar api.jquery.com/wrapInner/localhost/barra de herramientas.php lo que da como resultado un 404. Necesitas localhost/barra de herramientas.php en lugar de. - clarkeychico

Lo siento, no entendí muy bien a qué querías llegar con ese último comentario: frankie nwafili

Configure la propiedad css del índice z de su barra en un número grande:

<iframe style="z-index:999999;"></iframe>

Respondido 31 Jul 12, 21:07

    enter code here

var v = document.getElementsByTagName('html')[0].style.top.toString().substring(0, 2);

            if (parseInt(v, 10) > 0) {

                var pxx = (v + 35).toString();
                document.getElementsByTagName('html')[0].style.position = "relative"
                document.getElementsByTagName('html')[0].style.top = pxx + "px";

            }
            else {

                document.getElementsByTagName('html')[0].style.position = "relative"
                document.getElementsByTagName('html')[0].style.top = "35px";
            }


  var url = chrome.extension.getURL('docz/links.html');
  var fRame =  $(document.createElement('iframe'));
  var wrapDiv = $(document.createElement('div'));

    wrapDiv.attr('id','wDiv');
    wrapDiv.css('width','100%');  
    wrapDiv.css('height','35px' );
    wrapDiv.css('position','fixed' );
    wrapDiv.css('top','0 !important');
    wrapDiv.css('z-index','2147482637');   

  fRame.attr('id','fr1');
  fRame.attr('scrolling','no');
  fRame.attr('src',url);
  fRame.attr('frameborder','0');
  fRame.css('position','absolute');
  fRame.css('top', '0 !important');


  fRame.css('width','100%');
  fRame.css('height','35px');
  fRame.css('border','none'); 
  fRame.css('border-radius','10px 10px 10px 10px');
  fRame.css('background-color','silver'); 
  fRame.appendTo(wrapDiv);
  wrapDiv.prependTo(document.body);


try this... before was more crude approach put this code int  $(function(){});

Respondido el 27 de Septiembre de 12 a las 23:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.