Изменить источник iframe, т.е. используя javascript

Я использовал 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?

Ответы

Ответ 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.

Ответ 2

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

Ответ 3

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

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

Ответ 4

Коллекция фреймов возвращает объекты окна (или эквивалент). Вы хотите настроить таргетинг на объект документа; попробуйте сделать:

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

Это работает в IE, FF, Safari и т.д., поэтому нет необходимости в запутанном обнаружении браузера.

пь. IIRC в коллекции кадров ссылается на имя в IE, id в других браузерах, поэтому вам нужно как имя, так и атрибут id, но у вас уже есть это, поэтому не беспокойтесь!

Ответ 5

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

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

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

Ответ 6

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

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

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

Ответ 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;
}

Ответ 8

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

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

Ответ 9

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

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

Ответ 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>

Ответ 11

Просто используйте следующий код.

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

Он должен работать с каждым браузером.

Ответ 12

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

  • Изменение href.
  • Изменение src.

Оба метода требуют, чтобы iFrame полностью загрузилась до того, как вы попытаетесь выполнить модификацию.

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

  • Обращаясь к содержимому окна элемента:

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

  • Обратившись к NAME элемента:

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

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

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

Ответ 13

Обратите внимание, что если вы только меняете #anchor URL (т.е. меняете с page.php # на страницу .php #, то), IE не обновит страницу, кроме Chrome и Firefox. Если это ваша проблема, вы можете добавить что-то случайное в строку запроса, чтобы IE считал это совершенно новой страницей и заставлял перезагружать.

Например (с помощью jQuery):

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