jquery - dinamico - cambiar la fuente de iframe, es decir, usando javascript

jquery iframe content html

Question

He usado un iframe que se ve así:

<iframe style=''width: 330px; height: 278px'' scrolling=''no'' name="iframeId" class="advPlayer" id="iframeId" frameborder="0" src=''../../player/iabpreview.php?adid=<?php echo $selectedAdIdx ?>&amp;autoPlay=true''></iframe>

Cada vez que hago clic en un <div> , tengo que cambiar la fuente del iframe. Estoy usando el siguiente código:

if ($j.browser.msie) {            
  frames[''iframeId''].window.location="../player/iabpreview.php?adid="+adId+"&autoPlay=true";
}else {
  $j(".advPlayer").eq(0).attr("src", "../player/iabpreview.php?adid="+adId+"&autoPlay=true");    
}

Esto funciona con Firefox, pero no con Internet Explorer.

¿Qué código funcionaría para Internet Explorer también?

Answer 1

var myFrame = document.getElementById(''myFrame''); 
myFrame.src = ''http://example.com'';

Tiene fuga de memoria. Después de que el iframe src ha cambiado muchas veces, su navegador se ralentiza hasta convertirse en un rastreo.

Answer 2

La colección de marcos devuelve objetos de ventana (o el equivalente de). Desea orientar el objeto del documento; trata de hacerlo:

window.frames [''iframeId'']. document.location.href = ....

Esto funciona en IE, FF, Safari, etc., por lo que no es necesario también detectar el navegador desordenado.

nótese bien. IIRC la colección de marcos hace referencia al nombre en IE, id en otros navegadores, por lo que necesitas tanto el nombre como el atributo de identificación en el ... ¡pero ya lo tienes, así que no te preocupes!

Answer 3

Puede cambiar el src del iframe usando dos métodos:

1. Cambiando el href.
2. Cambiando el src.

Ambos métodos requieren que el iFrame se cargue por completo antes de intentar la modificación.

Cambiar el href funciona en todos los navegadores, incluido IE5. Puede abordar el marco

• Al referirse a la ventana de contenido del elemento:

  var myFrame = document.getElementById (''myFrame''); myFrames.contentWindow.location = '' http://example.com '';

• Al referirse al NOMBRE del elemento:

  var myFrame = window.frames.myFrame; // donde myFrame es el NOMBRE del elemento myFrame.location = '' http://example.com '';

Cambiar el src es como se dijo anteriormente, seleccionando el elemento y cambiando el src, pero debe ser un elemento secundario, no descendiente.

var myFrame = document.getElementById(''myFrame'');
myFrame.src = ''http://example.com'' 

Answer 4

document.getElementById("iframeId").src = "Your URL here."

Answer 5

window.frames[''iframeId''].document.location.href =...

tiene fuga de memoria también. El efecto es más renunciado en los navegadores IE.

Answer 6

Obtengo esto de otro lado:

function getElementById(strId) {
  var element;

  if (document.getElementById) {
    element = document.getElementById(strId);
  }
  else if (document.all) {
    element = document.all[strId];
  } else if (document.layers) {
    element = document.layers[strId];
  } else {
    element = eval("document." + strId);
  }

  return element;
}

Answer 7

Solo usa el siguiente código.

var iframe = document.getElementById(''IFRAME ID''); // just for clarity
iframe .src = ''URL here'';

Debería funcionar con todos los navegadores.

Answer 8

document.getElementById(''MsgBoxWindow'').getAttribute(''src'') funciona en Internet Explorer, Firefox, Safari, para obtener la URL de origen.

document.getElementById(''MsgBoxWindow'').setAttribute(''src'', urlwithinthedomain) funciona en los mismos navegadores para configurar la URL de origen.

Sin embargo, el iframe debe estar cargado antes de llamar. No lo coloque antes del iframe mientras llama al código JavaScript. Puede colocar ambos después del iframe, si está llamando justo después de la carga de la página, y funcionará como se esperaba.

Answer 9

Nunca debe utilizar ''detección de navegador'', sino detección de funciones. La forma más segura de imho es esta:

function SetIFrameSource(cid, url){
  var myframe = document.getElementById(cid);
  if(myframe !== null){
    if(myframe.src){
      myframe.src = url; }
    else if(myframe.contentWindow !== null && myframe.contentWindow.location !== null){
      myframe.contentWindow.location = url; }
    else{ 
      myframe.setAttribute(''src'', url); 
    }
  }
}

Solo prueba si la propiedad src está disponible. Si no, prueba en la ventana de contenido, y el último intento es setAttribute.

Answer 10

<script type="text/javascript">
  function changesrc(iframid, pagesrc)
  {
    document.getElementById(iframid).src = pagesrc; 
  }
</script>

<table style="width: 100%">
<tr>
  <td>
    <a href="#" onclick="changesrc(''iframe1'',''page1.php'')">Page1</a> <br/>
    <a href="#" onclick="changesrc(''iframe1'',''page2.php'')">Page2</a> <br/>
    <a href="#" onclick="changesrc(''iframe1'',''page3.php'')">Page3</a>
  </td>
  <td>   
    <iframe id="iframe1" src="page1.php" scrolling="no" 
            height="100%" width="100%" style="border:0px;"></iframe>
  </td>
</tr>
</table>

Answer 11

Tenga en cuenta que si solo está cambiando el #anchor de la URL (es decir, cambiando de page.php # this a page.php #), entonces IE no actualizará la página, pero Chrome y Firefox lo harán. Si este es su problema, entonces puede agregar algo al azar a su cadena de consulta para hacer que IE piense que es una página totalmente nueva y forzar la recarga.

Por ejemplo (usando jQuery):

var hash = ''yourHash'';
var rand = 1 + Math.floor(Math.random() * 9999);
var helpUrl = ''page.php?rand='' + rand + ''#'' + hash;
$(''#iframe'').attr(''src'', helpUrl);

Answer 12

He intentado con getElementById y muchas otras variantes. Ninguno funcionó igual en IE, FF, Opera o Chrome.

Este funciona bien: parent.frames.IFRAME_ID.location.href = ''/'';

Answer 13

Como usaste la etiqueta jquery, esto podría ser útil.

function resizeIframe(height) {
    height = parseInt(height);
    height += 100;
    $(''iframe#youriframeID'').attr(''height'', height);   
}

En caso de que esté haciendo un cambio de tamaño entre navegadores, eche un vistazo a esta publicación que explica cómo cambiar automáticamente el tamaño de la altura en función del contenido de los marcos flotantes. Necesitará acceso al html del sitio web iframed. Cambiar el tamaño de un iframe basado en el contenido