JavaScriptでiframe srcを変更する

94

<iframe src=... >誰かがラジオボタンをクリックしたときにを変更しようとしています。何らかの理由で私のコードが正しく機能しておらず、理由を理解するのに問題があります。ここに私が持っているものがあります：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Untitled 1</title>

  <script>
  function go(loc) {
    document.getElementById('calendar').src = loc;
  }
  </script>
</head>

<body>
  <iframe id="calendar" src="about:blank" width="1000" height="450" frameborder="0" scrolling="no"></iframe>

  <form method="post">
    <input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Day
    <input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Week
    <input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Month
  </form>

</body>

</html>
スニペットを展開

javascript  iframe  src 
— しんじお
ソース
@Pekkaだからコメントです。
— mbq
@mbqいいえ、つまり、このシナリオでは非常に悪い考えです。OPは外部サービスからのコードを埋め込んでいるようです。クロスドメインのセキュリティのため、最初はAJAXを使用してそれをフェッチすることはできません。また、たとえ可能であっても、HTMLを取得してDIVに入れても機能しません。そのような。IFrameは本当にここに行くべきものです
— Pekka
@ペッカ同意する。そのリモートサービスの部分を逃しました。人を混乱させないためにコメントを削除しました。
— -mbq
上記のコードがどのブラウザでも機能しないのはなぜですか????
— ハリックス

回答:

125

この場合は、おそらく間違った角括弧を使用していることが原因です。

document.getElementById['calendar'].src = loc;

する必要があります

document.getElementById('calendar').src = loc;
— ペッカ
ソース
11
@shinjuo onselectは、ここで使用する正しい属性ではありません。使用したいかもしれませんonclick-ただし、ユーザーがキーボードを使用しても起動しないことに注意してください
— Pekka
それがそうでした。ありがとう。私が選択を選んだ理由は、誰かがマウスでクリックする代わりにタブを
— 押してスペースを押した
@shinjuoええ、それはいい考えです。そのためにはいくつかのバリエーションを使用する必要があると思いますonchange。
— ペッカ
2
「onclick」はキーボードで機能します。「onselect」イベントはありません。
— アーロンD
@Aaronには非標準のonselectイベントがありますが、これはテキストを選択するためのものです。onclickラジオボタンのオン/オフを切り替えることができれば、すべてが解決されました。
— Pekka
61

多分これは役に立つかもしれません...それはプレーンなHTMLです-JavaScriptなし：

<p>Click on link bellow to change iframe content:</p>
<a href="http://www.bing.com" target="search_iframe">Bing</a> -
<a href="http://en.wikipedia.org" target="search_iframe">Wikipedia</a> -
<a href="http://google.com" target="search_iframe">Google</a> (not allowed in inframe)

<iframe src="http://en.wikipedia.org" width="100%" height="100%" name="search_iframe"></iframe>
スニペットを展開

ちなみに、一部のサイトではiframeで開くことができません（セキュリティ上の理由-クリックジャッキング）。

— イネマンジャ
ソース
2
「google.com」がインフレームで許可されていない理由と、それを利用可能にするためのアドバイスを教えてください（iframeではないが、同様に）。本当に感謝しています。
— 2018
1
@ hikaru89これは遅い返事です...利用できるようにするだけではできません。意図的にiframeで許可されていないため、Googleはさまざまな理由で独自にこれを行っています。
— ミスターSirCode
8

するonselect必要がありますonclick。これはキーボードユーザーに有効です。

また<label>、「日」、「月」、「年」のテキストにタグを追加して、クリックしやすくすることをお勧めします。コード例：

<input id="day" name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')"/><label for="day">Day</label>

属性onclickと値の間のスペースを削除することもお勧めしますが、ブラウザーで解析できます。

<input name="calendarSelection" type="radio" onclick = "go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')"/>Day

する必要があります：

<input name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')"/>Day
— アーロン・D
ソース
2
@nalply-私はあなたの反対票を理解していません。根本的な問題はスペースではなく、変更すべきだと私は言った。問題は、onselectがonclickであることです。また、Pekkaによる他の回答では問題が解決しないことにも注意してください。わかりやすくするために、回答を並べ替えます。
— アーロンD
新しい編集が以前よりも明確になったため、反対票を削除しました。
— nalply
2

これが私の更新されたコードです。それはうまく機能し、あなたを助けることができます。

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Untitled 1</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
  <script type="text/javascript">
  function go(loc) {
    document.getElementById('calendar').src = loc;
  }
  </script>
</head>

<body>
  <iframe id="calendar" src="about:blank" width="1000" height="450" frameborder="0" scrolling="no"></iframe>

  <form method="post">
    <input name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Day
    <input name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Week
    <input name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&type=1&l=en&tz=America/Los_Angeles&sh=[0,0]&v=1')" />Month
  </form>

</body>

</html>
— KBH
ソース
0

入力に変更onselectしonchangeて使用

calendar.src = loc

コードスニペットを表示

— カミル・キエチェフスキ
ソース
-2

あなたはJavaScriptでiframeを作ることによってそれを解決することができます

  document.write(" <iframe  id='frame' name='frame' src='" + srcstring + "' width='600'  height='315'   allowfullscreen></iframe>");
スニペットを展開
— ダニエル・ヤノフスキー
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.