Mengubah src iframe dengan Javascript

98

Saya mencoba untuk mengubah <iframe src=... >ketika seseorang mengklik tombol radio. Untuk beberapa alasan kode saya tidak berfungsi dengan benar dan saya mengalami kesulitan mencari tahu mengapa. Inilah yang saya miliki:

<!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>
Luaskan cuplikan

javascript  iframe  src 
— shinjuo
sumber
@Pekka Itu sebabnya ini adalah komentar.
— mbq
@mbq tidak, maksud saya itu ide yang sangat buruk dalam skenario ini. OP tampaknya menyematkan kode dari layanan eksternal. Anda tidak dapat mengambilnya menggunakan AJAX sejak awal karena keamanan lintas domain, dan bahkan jika Anda bisa, memiliki HTML dan memasukkannya ke dalam DIV tidak akan berfungsi, karena dapat berisi referensi relatif ke gambar dan lembar gaya dan seperti itu. IFrames benar-benar hal yang harus dilakukan di sini saya pikir
— Pekka
@Pekka Saya setuju; Saya melewatkan bagian layanan jarak jauh itu. Saya telah menghapus komentar saya agar tidak membingungkan orang.
— mbq
MENGAPA TIDAK BEKERJA kode di atas di sembarang browser ????
— harix

Jawaban:

127

Dalam kasus ini, mungkin karena Anda menggunakan tanda kurung yang salah di sini:

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

seharusnya

document.getElementById('calendar').src = loc;
— Pekka
sumber
11
@shinjuo onselectbukan atribut yang tepat untuk digunakan di sini. Anda mungkin ingin menggunakan onclick- perhatikan meskipun itu tidak akan menyala jika pengguna menggunakan keyboard mereka
— Pekka
Itulah itu. Terima kasih. Alasan saya memilih pilih adalah karena saya pikir jika seseorang menelusuri dan menekan spasi alih-alih klik mouse, itu masih akan berubah
— shinjuo
@shinjuo ya, itu ide yang bagus. Saya pikir Anda harus menggunakan beberapa variasi onchangeuntuk itu.
— Pekka
2
"onclick" berfungsi untuk keyboard. Tidak ada acara "onselect".
— Aaron D
@Aaron ada acara onselect non-standar, tetapi untuk memilih teks. Jika onclickberfungsi untuk menghidupkan / mematikan tombol radio maka semuanya sudah terpecahkan, bagus!
— Pekka
67

Mungkin ini bisa membantu ... Ini html biasa - tanpa 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>
Luaskan cuplikan

Ngomong-ngomong, beberapa situs tidak mengizinkan Anda membukanya di iframe (alasan keamanan - clickjacking)

— inemanja
sumber
2
Bisakah jelaskan mengapa " google.com " tidak diizinkan dalam inframe dan saran apa pun untuk membuatnya tersedia (tidak boleh iframe, tetapi serupa)? Aku sangat menghargai.
— Fuevo
2
@ hikaru89 ini adalah balasan yang terlambat ... Anda tidak bisa begitu saja "membuatnya" tersedia. Ini tidak diizinkan di iframe dengan sengaja, google melakukan ini karena berbagai alasan atas kemauan mereka sendiri.
— Tuan SirCode
18

Inilah cara jQuery untuk melakukannya:

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

The onselectharus onclick. Ini akan berfungsi untuk pengguna keyboard.

Saya juga merekomendasikan untuk menambahkan <label>tag ke teks "Hari", "Bulan", dan "Tahun" agar lebih mudah untuk diklik. Kode contoh:

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

Saya juga merekomendasikan untuk menghapus spasi antara atribut onclickdan nilai, meskipun dapat diurai oleh browser:

<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

Seharusnya:

<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
sumber
2
@nalply - Saya tidak mengerti suara negatif Anda. Akar masalah bukanlah spasi, yang saya katakan harus diubah. Masalahnya adalah satu pilihan harus onclick. Perhatikan juga bahwa jawaban lain dari Pekka tidak menyelesaikan masalah. Saya akan menyusun ulang jawaban saya untuk membuatnya lebih jelas.
— Aaron D
Saya menghapus suara negatif karena hasil edit baru Anda lebih jelas dari sebelumnya.
— nalply
6

Ini juga harus berfungsi, meskipun srcakan tetap utuh:

document.getElementById("myIFrame").contentWindow.document.location.href="http://myLink.com";
— Aram Paronikyan
sumber
3
Ini tidak akan berfungsi jika halaman di iframe berada di domain yang berbeda.
— Frederic Leitenberger
2

Ini kode saya yang diperbarui. Ini berfungsi dengan baik dan dapat membantu Anda.

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

ubah onselectmenjadi onchangeinput dan penggunaan

calendar.src = loc

Tampilkan cuplikan kode

— Kamil Kiełczewski
sumber
-2

Anda bisa mengatasinya dengan membuat iframe di javascript

  document.write(" <iframe  id='frame' name='frame' src='" + srcstring + "' width='600'  height='315'   allowfullscreen></iframe>");
Luaskan cuplikan
— daniel yanovsky
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.