Bagaimana untuk Mengubah suai Sumber iFrame Menggunakan JavaScript dengan betul?

Mengubah suai Sumber iFrame Menggunakan JavaScript

Apabila berhadapan dengan tugas mengemas kini atribut src iframe secara dinamik sebagai tindak balas kepada interaksi pengguna, seseorang mungkin menghadapi ralat yang tidak dijangka. Mari kita siasat contoh biasa di mana kefungsian yang diingini ialah menukar atribut src bagi iframe berlabel "kalendar" apabila mengklik butang radio.

Berikut ialah kod yang dimaksudkan:

<code class="html">function go(loc) {
  document.getElementById('calendar').src = loc;
}</code>

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

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

Walau bagaimanapun, kod ini gagal melaksanakan tindakan yang dimaksudkan. Isunya terletak pada ralat pengaturcaraan biasa: penggunaan kurungan yang tidak betul semasa merujuk iframe 'kalendar'.

Sintaks yang betul hendaklah:

document.getElementById('calendar').src = loc;

Daripada yang salah:

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

Petikan tunggal mengelilingi 'kalendar' dalam contoh terakhir mencipta rentetan, yang menghasilkan rujukan kepada unsur yang tidak wujud. Dengan menggunakan kurungan segi empat sama, kami betul-betul merujuk kepada iframe dengan 'kalendar' id.

Setelah pembetulan ini dibuat, kod tersebut harus berfungsi seperti yang diharapkan, mengemas kini atribut src iframe dengan lancar apabila butang radio diklik .

Atas ialah kandungan terperinci Bagaimana untuk Mengubah suai Sumber iFrame Menggunakan JavaScript dengan betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!