изменить источник iframe в т.е. с помощью JavaScript

Question

Я использовал iframe, который выглядит следующим образом:

<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>

Всякий раз, когда я нажимаю <div>, мне приходится менять источник iframe. Я использую следующий код:

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");    
}

Это работает с Firefox, но не с Internet Explorer.

Какой код будет работать и для Internet Explorer?

Answer 1

Вы никогда не должны использовать «Обнаружение браузера», но обнаружение функции. Самый безопасный способ imho это:

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); 
    }
  }
}

Просто проверьте, доступно ли свойство src. Если нет, протестируйте окно содержимого, и последняя попытка - setAttribute.

Answer 2

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

Answer 3

Я пробовал getElementById и много других вариантов. Ни один из них не работал одинаково на IE, FF, Opera или Chrome.

Этот работает хорошо: parent.frames.IFRAME_ID.location.href = '/';

Answer 4

<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 5

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

также имеет утечку памяти. Эффект больше отвергнут в браузерах IE.

Answer 6

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

Имеет утечку памяти. После многократного изменения iframe src ваш браузер замедляется до сканирования.

Answer 7

Я получаю это откуда-то еще:

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 8

Вы можете изменить src iframe двумя способами:

1. Изменение href.
2. Смена источника.

Оба метода требуют полной загрузки iFrame перед попыткой модификации.

Изменение href работает во всех браузерах, включая IE5. Вы можете обратиться к кадру

• При обращении к окну содержимого элемента:

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

• При ссылке на НАИМЕНОВАНИЕ элемента:

  var myFrame = window.frames.myFrame; // где myFrame - ИМЯ элемента myFrame.location = 'http://example.com';

Смена src производится так же, как указано выше, путем выбора элемента и изменения src - но это должен быть дочерний элемент, а не дочерний элемент.

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

Answer 9

Поскольку вы использовали тег jquery, это может быть удобно.

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

Если вы выполняете кросс-браузерное изменение размера, посмотрите этот пост, в котором объясняется, как автоматически изменять размер по высоте в зависимости от содержимого фреймов. Вам понадобится доступ к html веб-сайту iframed. Изменение размера фрейма в зависимости от содержимого

Answer 10

document.getElementById('MsgBoxWindow').getAttribute('src') работает в Internet Explorer, Firefox, Safari, чтобы получить исходный URL.

document.getElementById('MsgBoxWindow').setAttribute('src', urlwithinthedomain) работает в тех же браузерах, чтобы установить исходный URL.

Однако, iframe должен быть загружен перед вызовом. Не помещайте его перед iframe при вызове кода JavaScript. Вы можете поместить оба после iframe, если вы вызываете его сразу после загрузки страницы, и он будет работать как положено.