İframe src'yi Javascript ile değiştirme

99

<iframe src=... >Birisi bir radyo düğmesini tıkladığında bir değiştirmeye çalışıyorum . Bazı nedenlerden dolayı kodum doğru çalışmıyor ve nedenini anlamakta güçlük çekiyorum. İşte sahip olduğum şey:

<!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>
Snippet'i genişlet

javascript  iframe  src 
— Shinjuo
kaynak
@Pekka Bu yüzden bir yorum.
— mbq
@mbq hayır, yani bu senaryoda gerçekten kötü bir fikir. OP, harici bir hizmetten kod yerleştiriyor gibi görünüyor. Etki alanları arası güvenlik nedeniyle AJAX kullanarak bunu ilk başta getiremezsiniz ve yapabilseniz bile, HTML'ye sahip olsanız ve onu bir DIV'ye koymak işe yaramaz çünkü resimlere ve stil sayfalarına göreceli referanslar içerebilir böyle. IFrame'ler gerçekten burada olması gereken şey sanırım
— Pekka
@Pekka Kabul ediyorum; Uzaktan servis kısmını kaçırdım. İnsanların kafasını karıştırmamak için yorumumu sildim.
— mbq
Yukarıdaki kod herhangi bir tarayıcıda NEDEN ÇALIŞMIYOR ????
— harix

Yanıtlar:

128

Bu durumda, muhtemelen burada yanlış parantezleri kullandığınızdan kaynaklanmaktadır:

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

olmalı

document.getElementById('calendar').src = loc;
— Pekka
kaynak
11
@shinjuo onselectburada kullanılacak doğru öznitelik değil. Kullanmak isteyebilirsiniz onclick- kullanıcı klavyesini kullanırsa bunun ateşlenmeyeceğine dikkat edin
— Pekka
Öyleydi. Teşekkürler.
— Seçimi seçmemin
@shinjuo evet, bu iyi fikir. Sanırım bunun için bazı varyasyonlarını kullanmanız gerekecek onchange.
— Pekka
2
"onclick" klavye için çalışır. "Onselect" olayı yoktur.
— Aaron D
@Aaron standart olmayan bir seçmeli olay var, ancak bu metin seçmek için. Eğer onclicko zaman her şey, büyük çözüldü açık / kapalı bir radyo düğmesi dönüm için işler!
— Pekka
67

Belki bu yardımcı olabilir ... Düz html - javascript yok:

<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>
Snippet'i genişlet

Bu arada, bazı siteler onları iframe içinde açmanıza izin vermiyor (güvenlik nedenleri - tıklama hırsızlığı)

— Inemanja
kaynak
2
Lütfen " google.com " un çerçeve içinde neden izin verilmediğini ve onu kullanılabilir hale getirmek için herhangi bir tavsiyeyi açıklayabilir misiniz (iframe değil, benzer olmalıdır)? Çok takdir ediyorum.
— Fuevo
2
@ hikaru89 bu geç bir cevap ... Sadece onu "sunamazsınız". Kasıtlı olarak iframe'lerde kullanılmasına izin verilmez, google bunu birçok nedenden dolayı kendi rızasıyla yapar.
— Mister SirCode
18

İşte bunu yapmanın jQuery yolu:

$('#calendar').attr('src', loc);
— Jim Clouse
kaynak
9

onselectOlmalıdır onclick. Bu klavye kullanıcıları için çalışacaktır.

<label>Tıklanmalarını kolaylaştırmak için "Gün", "Ay" ve "Yıl" metnine etiket eklemenizi de tavsiye ederim . Örnek kod:

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

onclickTarayıcılar tarafından ayrıştırılabilse de, öznitelik ile değer arasındaki boşlukları da kaldırmanızı öneririm :

<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

Olmalı:

<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
kaynak
2
@nalply - Olumsuz oyunuzu anlamıyorum. Asıl sorun, değiştirilmesi gerektiğini söylediğim boşluklar değil . Sorun, onselect'in onclick olması gerektiğidir. Ayrıca Pekka'nın diğer cevabının sorunu çözmediğini unutmayın. Daha net hale getirmek için cevabımı yeniden sıralayacağım.
— Aaron D
Yeni düzenlemeniz öncekinden daha net olduğu için olumsuz oyu kaldırdım.
— nalply
6

srcSağlam kalmasına rağmen, bu da çalışmalıdır :

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
— Aram Paronikyan
kaynak
3
Bu, iframe'deki sayfa farklı bir alanda olduğunda çalışmaz.
— Frederic Leitenberger
2

İşte güncellenmiş kodum. İyi çalışıyor ve size yardımcı olabilir.

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

değiştirmek onselectiçin onchangegiriş ve kullanımda

calendar.src = loc

Kod parçacığını göster

— Kamil Kiełczewski
kaynak
-2

Javascript'te iframe oluşturarak çözebilirsiniz.

  document.write(" <iframe  id='frame' name='frame' src='" + srcstring + "' width='600'  height='315'   allowfullscreen></iframe>");
Snippet'i genişlet
— daniel yanovsky
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.