web-dev-qa-db-ja.com

つまり、JavaScriptを使用してiframeソースを変更する

私は次のような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でもどのコードが機能しますか？

jqueryiframe
15
rohini

あなたは決して「ブラウザ検出」ではなく、機能検出を使用すべきではありません。 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です。

25
Corniel
document.getElementById("iframeId").src = "Your URL here."
14
Kirtan

私はgetElementByIdと他の多くの亜種を試しました。 IE、FF、Opera、Chromeで同じように機能するものはありません。

これはうまくいきます：parent.frames.IFRAME_ID.location.href = '/';

2
Andi T
<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>
1
Nasirali

document.getElementById('MsgBoxWindow').getAttribute('src')はInternet Explorer、Firefox、Safariで動作し、ソースURLを取得します。

document.getElementById('MsgBoxWindow').setAttribute('src', urlwithinthedomain)は、同じブラウザで動作してソースURLを設定します。

ただし、呼び出す前にiframeを読み込む必要があります。 JavaScriptコードを呼び出すときは、iframeの前に配置しないでください。ページの読み込み直後に呼び出す場合は、iframeの後に両方を配置でき、期待どおりに動作します。

1
EHCanadian83

次の2つの方法を使用して、iframeのソースを変更できます。

  1. Hrefを変更します。
  2. Srcを変更します。

どちらの方法でも、変更を試みる前に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'
1
SamGoody

私はどこかからこれを手に入れます：

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;
}
1
vince

フレームコレクションは、ウィンドウオブジェクト（または同等のもの）を返します。ドキュメントオブジェクトをターゲットにしたい。やってみてください：

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

これはIE、FF、Safariなどで機能するため、厄介なブラウザーを検出する必要もありません。

nb。 IIRCフレームコレクションはIEでnameを参照し、他のブラウザーではidを参照しているため、-にname属性とid属性の両方が必要ですが、すでに持っているので心配ありません！

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

メモリリークもあります。この効果は、IEブラウザーではさらに否定されます。

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

メモリリークがあります。 iframe srcが何度も変更された後、ブラウザの速度が低下してクロールが発生します。

1
kl2217

次のコードを使用してください。

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

すべてのブラウザで動作するはずです。

0
giorgi

URLの#anchorのみを変更する場合（つまり、page.php＃thisからpage.php＃thatに変更する場合）、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);
0
Andrew