$ no está definido en iFrame

Question

Tengo una página con un iframe. mi página iframe es iframe.php y mi página principal es main.php cuando cargo iframe.php directamente mi código jquery se ejecuta bien, pero cuando cargo main.php (que contiene iframe.php como iframe) me sale un error ". $ no está definido ".

esto podría deberse a que tanto main.php y iframe.php utilizar

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 

si es así, ¿cómo puedo usar jQuery en la página iframe sin incluir esta línea?

Answer 1

Me di cuenta. En el marco flotante Solía ​​

var $ = parent.$; 

, así como la concesión de jQuery llama el documento de contexto. es decir

$("#element", document).doStuff(); 

Es raro, porque la forma original, lo tenía (con jQuery incluye en ambas páginas) funcionó bien en Safari para Mac, pero en Firefox que me dio el error

Error: c.defaultView.getComputedStyle(h, null) is null Source File: http://code.jquery.com/jquery-latest.pack.js Line: 16

Answer 2

Malas noticias: no puede usar Jquery a menos que esté en el documento. Entonces, vas a tener que cargarlo independientemente.

En realidad, no hay ningún problema al incluir la llamada jquery en ambos documentos. Tengo varios clientes que iFrame una parte de la aplicación de mi empresa para automatización de marketing (que lo tiene incluido) y también he incluido Jquery en su documento principal, y funciona perfectamente sin conflictos. Desde el punto de vista de la carga, suponiendo que esté configurado correctamente, el golpe será insignificante debido al almacenamiento en caché. Entonces, incluye lejos.

Regla de oro en iFrames ... piense en ellas como páginas separadas dentro de su página. Sí, en algunos casos las cosas se trasladan, pero el modelo de origen del documento impide que cosas como CSS se crucen entre padres e hijos.

Answer 3

Estaba preparando iframe en una página web y que pude encontrar $ objeto utilizando

var $ = parent.$; 

pero esto fue no realizar la selección de los elementos de marco flotante. Encontrado debajo de código para ejecutar selector en el cuerpo iFrame

if (typeof(jQuery) == "undefined") { 
    var iframeBody = document.getElementsByTagName("body")[0]; 
    var jQuery = function (selector) { return parent.jQuery(selector, iframeBody); }; 
    var $ = jQuery; 
} 

De alguna manera el objeto de documento fue también undefined.

Fuente del código anterior: https://gist.github.com/843229

Espero que ayuda a alguien.

Answer 4

Actualizar a una versión más reciente, por ej. https://code.jquery.com/jquery-2.1.3.min.js