Iframe src mit Javascript ändern

94

Ich versuche zu ändern, <iframe src=... >wenn jemand auf ein Optionsfeld klickt. Aus irgendeinem Grund funktioniert mein Code nicht richtig und ich habe Probleme herauszufinden, warum. Folgendes habe ich:

<!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>
Erweitern Sie das Snippet

javascript iframe src Shinjuo
quelle
@ Pekka Deshalb ist es ein Kommentar.
mbq
@mbq nein, ich meine, es ist eine wirklich schlechte Idee in diesem Szenario. Das OP scheint Code von einem externen Dienst einzubetten. Sie können dies mit AJAX aus Gründen der domänenübergreifenden Sicherheit nicht abrufen, und selbst wenn Sie könnten, würde es nicht funktionieren, HTML zu haben und es in ein DIV zu stellen, da es relative Verweise auf Bilder und Stylesheets und enthalten könnte eine solche. IFrames sind wirklich das Richtige, denke ich
Pekka
@ Pekka Ich stimme zu; Ich habe diesen Remote-Service-Teil verpasst. Ich habe meinen Kommentar gelöscht, um die Leute nicht zu verwirren.
mbq
WARUM ARBEITEN SIE DEN Code oben in keinem Browser ????
Harix

Antworten:

124

In diesem Fall liegt es wahrscheinlich daran, dass Sie hier die falschen Klammern verwenden:

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

sollte sein

document.getElementById('calendar').src = loc;
Pekka
quelle
11
@shinjuo onselectist hier nicht das richtige Attribut. Sie können verwenden onclick- beachten Sie jedoch, dass das nicht ausgelöst wird, wenn der Benutzer seine Tastatur verwendet
Pekka
Das war es auch. Vielen Dank. Der Grund, warum ich mich für die Auswahl entschieden habe, ist, dass ich dachte, wenn sich jemand durch die
Leertaste bewegt
@ Shinjuo Ja, das ist eine gute Idee. Ich denke allerdings, dass Sie dafür eine Variation verwenden müssten onchange.
Pekka
2
"onclick" funktioniert für die Tastatur. Es gibt kein "onselect" -Ereignis.
Aaron D
@Aaron Es gibt ein nicht standardmäßiges Onselect-Ereignis, aber es dient zur Auswahl von Text. Wenn das onclickEin- und Ausschalten eines Optionsfelds funktioniert, ist alles gelöst, großartig!
Pekka
61

Vielleicht kann dies hilfreich sein ... Es ist einfach HTML - kein 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>
Erweitern Sie das Snippet

Auf einigen Websites können Sie sie übrigens nicht im Iframe öffnen (Sicherheitsgründe - Clickjacking).

inemanja
quelle
2
Könnten Sie bitte erklären, warum " google.com " im Inframe nicht erlaubt ist, und Ratschläge geben, um es verfügbar zu machen (darf nicht iframe sein, sondern ähnlich)? Schätzen Sie so viel.
Qibiron, der
1
@ hikaru89 Dies ist eine späte Antwort ... Sie können es nicht einfach "verfügbar machen". Es ist absichtlich nicht in Iframes erlaubt, Google tut dies aus vielen Gründen von sich aus.
Herr SirCode
18

Hier ist die jQuery-Methode:

$('#calendar').attr('src', loc);
Jim Clouse
quelle
8

Das onselectmuss sein onclick. Dies funktioniert für Tastaturbenutzer.

Ich würde auch empfehlen <label>, dem Text "Tag", "Monat" und "Jahr" Tags hinzuzufügen , damit sie leichter angeklickt werden können. Beispielcode:

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

Ich würde auch empfehlen, die Leerzeichen zwischen dem Attribut onclickund dem Wert zu entfernen , obwohl es von Browsern analysiert werden kann:

<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

Sollte sein:

<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
Aaron D.
quelle
2
@nalply - Ich verstehe deine Ablehnung nicht. Das Grundproblem sind nicht die Leerzeichen, von denen ich sagte, dass sie geändert werden sollten. Das Problem ist, dass die Auswahl per Mausklick erfolgen sollte. Beachten Sie auch, dass die andere Antwort von Pekka das Problem nicht löst. Ich werde meine Antwort nachbestellen, um sie klarer zu machen.
Aaron D
Ich habe die Abstimmung entfernt, weil Ihre neue Bearbeitung klarer ist als zuvor.
Nalply
6

Dies sollte auch funktionieren, obwohl der srcWille intakt bleibt:

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
Aram Paronikyan
quelle
3
Dies funktioniert nicht, wenn sich die Seite im Iframe in einer anderen Domäne befindet.
Frederic Leitenberger
2

Hier ist mein aktualisierter Code. Es funktioniert gut und kann Ihnen helfen.

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

ändern , onselectum onchangein Ein- und Verwendung

calendar.src = loc

Code-Snippet anzeigen

Kamil Kiełczewski
quelle
-1

Sie können es lösen, indem Sie den Iframe in Javascript erstellen

  document.write(" <iframe  id='frame' name='frame' src='" + srcstring + "' width='600'  height='315'   allowfullscreen></iframe>");
Erweitern Sie das Snippet
Daniel Yanovsky
quelle