Rumah  >  Artikel  >  hujung hadapan web  >  Pengendalian iframe dalam jQuery (klik butang untuk mencipta tetingkap baharu)_jquery

Pengendalian iframe dalam jQuery (klik butang untuk mencipta tetingkap baharu)_jquery

WBOY
WBOYasal
2016-05-16 15:04:271419semak imbas

d5ba1642137c3f32f4f4493ae923989c juga harus menjadi bentuk bingkai Perbezaan daripada 04a0d55efbbfd646a993fbc01f262c57

Saya menghadapi masalah hari ini: Bagaimana untuk mengklik butang untuk menambah tetingkap kecil baharu pada halaman semasa untuk memaparkan maklumat gambar?

Seperti yang ditunjukkan di bawah:

Sebelum mengklik:

Selepas mengklik:

Analisis: Untuk mengelakkan tetingkap kecil yang baru ditambah daripada menjejaskan halaman induk, kami menggunakan teknologi rangka kerja iframe di sini.

[d5ba1642137c3f32f4f4493ae923989c juga harus menjadi bentuk bingkai. Perbezaan daripada 04a0d55efbbfd646a993fbc01f262c57 】

Idea pelaksanaan ialah: (1) Tambahkan acara klik pada butang, tambah tetingkap iframe selepas klik dan tambah alamat imej yang dijana.

Kod pelaksanaan khusus:

(1) Tambahkan acara klik pada butang:

<input type="radio" name="dynamicType" id="dianji" style="padding: 0 10px 0 5px;margin-left:10px;margin-top: 13px;"/>
<p class="loadPhoto"></p>
$("#dianji").click(function(){
  $("p.loadPhoto").empty(); // 清空原来的p标签的中内容
  $("p.loadPhoto").html("<iframe width=520 height=400 name=\"touzizuhe\" id=\"touzizuhe\" frameborder=0 src="生成图片的地址"></iframe>");// 添加iframe的jquery的语句
});

Nota: Selepas iframe dibangunkan di sini, alamat tempat imej dijana akan diakses secara automatik, supaya keperluan untuk penjanaan imej dipenuhi.

Ini semua tentang pengendalian iframe dalam jQuery (klik butang untuk mencipta tetingkap baharu, saya harap ia akan membantu anda!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn