jQuery Force establece el atributo src para iframe

83

Tengo una página principal (en realidad, una JSP) con un iframe dentro como;

<iframe name="abc_frame" id="abc_frame" src="about:blank" frameborder="0" scrolling="no"></iframe>

Ahora hay varios enlaces en la página principal (renderizados dinámicamente a través de JSP) que pueden intentar establecer el src en alguna URL ...

Ahora mi pregunta es, usando jQuery (puede ser live ()), ¿puedo anular eso de tal manera que el atributo "src" para abc_frame siempre tenga algún valor particular (por ejemplo, "somefixedURL")

No puedo capturar el clic del enlace, ya que se crea de forma completamente dinámica a través de un código Java y, por lo tanto, estoy tratando de anular el iframe src.

javascript jquery dom testndtv
fuente

Respuestas:

166

Utilice attr

$('#abc_frame').attr('src', url)

De esta manera, puede obtener y configurar cada atributo de etiqueta HTML. Tenga en cuenta que también hay .prop(). Vea .prop () vs .attr () sobre las diferencias. Versión corta: .attr()se utiliza para los atributos ya que están escritos en código fuente HTML y .prop()es para todo lo que JavaScript adjunta al elemento DOM.

PiTheNumber
fuente
La razón por la que esto no funcionaría es después de que se haya cargado la página, otro enlace cambiaría el src a un nuevo valor ...
testndtv
Si acepta el código al final del archivo, el código se ejecutará después de los otros scripts. Si su problema es creado por un enlace específico en el que el usuario hace clic, puede agregar un segundo evento onclick al enlace. De lo contrario, debe usar setTimout / setInterval y verificar repetidamente el valor de src (¡feo!).
PiTheNumber
20

si está utilizando jQuery 1.6 y superior, desea utilizar .prop () en lugar de.attr():

$('#abc_frame').prop('src', url)

Consulte esta pregunta para obtener una explicación de las diferencias.

Kalyfe
fuente
4
Enlace interesante, pero tenga en cuenta que la respuesta se ha actualizado porque jQuery revirtió el attr() comportamiento. En general, no estaría de acuerdo con usarlo .prop()aquí porque srces un atributo, no una propiedad, como .prop()explica la documentación de la API para usted vinculada.
PiTheNumber
9

Al generar los enlaces, establezca el destino en la propiedad de nombre de iframes y probablemente no tendrá que lidiar con jquery en absoluto.

<a href="inventory.aspx" target="contentframe"  title="Title Inventory">
<iframe id="iframe1" name="contentframe"  ></iframe>
Brian Rizo
fuente
Es una buena idea utilizar el método nativo del navegador cuando sea posible, pero creo que el usuario tiene enlaces dinámicos, por lo que necesita capturar el atributo de clic.
efwjames
¿Qué tan dinámico? Al generar la página, simplemente configure el href en lo que necesite. O incluso en la carga de dom, simplemente establezca el atributo href si es necesario. El punto es no tener que manejar la propiedad src del iframe y esto lo hace posible.
Brian Rizo
8 
$(document).ready(function() {
    $('#abc_frame').attr('src',url);
})
Jayendra
fuente
5

Establecer el atributo src no funcionó para mí. El iframe no mostró la URL.

Lo que funcionó para mí fue:

window.open(url, "nameof_iframe");

Espero que ayude a alguien.

Hari
fuente
establecer con .attr () tampoco funcionó para mí. Sin embargo
Andy N
3 
<script type="text/javascript">
  document.write(
    "<iframe id='myframe' src='http://www.example.com/" + 
    window.location.search + "' height='100' width='100%' >"
  ) 
</script>

Este código toma los parámetros de URL (? A = 1 & b = 2) de la página que contiene el iframe y los adjunta a la URL base del iframe. Funciona para mis propósitos.

Arend
fuente
document.writees equivalente a usar eval()- ¡está sujeto a inyección de script! ¡Úselo solo con extrema precaución!
amphetamachine
1

No puede configurar el src de FIX iframe o evitar que javascript / form submit cambie su ubicación. Sin embargo se puede poner script para onload de la página y el cambio de acción de cada enlace dinámico.

Jan Pfeifer
fuente
1 
$(".excel").click(function () {
    var t = $(this).closest(".tblGrid").attr("id");
    window.frames["Iframe" + t].document.location.href = pagename + "?tbl=" + t;
});

esto es lo que uso, no se necesita jquery para esto. En este escenario particular, para cada tabla que tengo con un icono de exportación de Excel, esto obliga al iframe adjunto a esa tabla a cargar la misma página con una variable en la Cadena de consulta que busca la página, y si se encuentra la respuesta, escribe una secuencia con un excel mimetype e incluye los datos de esa tabla.

vernmico
fuente