Perbedaan antara window.parent dan window.opener JavaScript memanggil metode jendela utama
1: window.parent adalah contoh halaman iframe yang memanggil objek halaman induk:
a.html
Kode HTML<html>
<head><title>Halaman induk</title></head>
<tubuh>
<nama formulir="form1" id="form1">
<input type="teks" nama="nama pengguna" id="nama pengguna"/>
</bentuk>
<iframe src="b.html" lebar=100%></iframe>
</tubuh>
</html>
Jika kita perlu memberikan nilai pada kotak teks nama pengguna di a.htm di b.htm, sama seperti banyak fungsi unggahan, halaman fungsi unggah ada di Ifrmae. Setelah unggahan berhasil, kita memasukkan jalur yang diunggah ke dalam kotak teks dari halaman induk.
Kode html
harus ditulis dalam b.html
<skrip tipe="teks/javascript">
var _parentWin = window.parent;
_parentWin.form1.username.value = "xxxx" ;
</skrip>
Alamat instans: http://www.cnspry.cn/blog/attachments/window.parent instance/a.html
Kode sumber:
1.a.html
Kode HTML
<html>
<kepala>
<title>Halaman utama</title>
<skrip>
/** Variabel pengujian ditambahkan untuk menguji jendela anak IFrame yang memanggil variabel global dari jendela induk*/
var parentVairous = "Variabel pengujian ditambahkan untuk menguji jendela anak IFrame yang memanggil variabel global jendela induk";
fungsi parentInvokeIFrame()
{
var iframeTest = document.frames["iframeTest"]; //Menggunakan document.getElementById("iframeTest");
peringatan(iframeTest.document.body.innerHTML);
peringatan(iframeTest.iFrameVair);
}
</skrip>
</kepala>
<tubuh>
<nama formulir="form1" id="form1">
<input type="teks" nama="nama pengguna" id="nama pengguna"/>
<input type = "button" value = "Jendela induk memanggil konten di jendela anak IFrame" onclick = 'parentInvokeIFrame()'/>
</bentuk>
<iframe src="b.html" lebar = '100%' id = 'iframeTest'></iframe>
</tubuh>
</html>
1.b.html
Kode HTML
<html>
<kepala>
<judul></judul>
<skrip tipe="teks/javascript">
/** Fungsi global jendela anak ditambahkan untuk menguji formulir induk yang memanggil fungsi global formulir anak IFrame*/
var iFrameVair = "Uji formulir induk untuk memanggil fungsi global formulir anak IFrame";
fungsiUpdateParent()
{
var _parentWin = window.parent;
_parentWin.form1.username.value = "xxxx" ;
}
fungsi anakInvokeParent()
{
var parentVairous = window.parent.window.parentVairous;
waspada(indukVairous);
}
</skrip>
</kepala>
<tubuh>
<nama formulir="form1" id="form1">
<p> </p>
<p menyelaraskan="tengah">
<tipe masukan = "tombol"
nama = "tombol"
id = "tombol"
value = "Perbarui konten Nama Pengguna halaman utama"
onclick = "UpdateParent()">
<tipe masukan = "tombol"
nama = "tombol2"
id = "tombol2"
value = "Uji jendela anak IFrame untuk memanggil variabel global jendela induk"
onclick = "childInvokeParent();"/>
</p>
<p> </p>
</bentuk>
</tubuh>
</html>
ps: Tidak dapat diperoleh di seluruh domain. Misalnya, jika src dari iframe adalah 'http://www.xxx.ccc/', maka tidak dapat diperoleh.
2: window.opener adalah halaman anak yang dibuka oleh window.open yang memanggil alamat contoh objek halaman induk: http://www.cnspry.cn/blog/attachments/window.opener instance/a.html
Kode sumber:
2.a.html
Kode HTML
<html>
<kepala>
<title>Halaman utama</title>
<skrip tipe="teks/javascript">
/** Variabel pengujian ditambahkan untuk menguji jendela anak IFrame yang memanggil variabel global dari jendela induk*/
var parentVairous = "Variabel pengujian ditambahkan untuk menguji jendela anak IFrame yang memanggil variabel global jendela induk";
/**
* Karena berbeda dengan IFrame (IFrame memiliki id, window.open() memiliki mode yang berbeda dengan jendela induk-anak IFrame),
* Jadi ketika jendela baru dibuka melalui metode window.open(), pasti ada objek jendela baru tersebut
* Tentu saja, sub-jendela harus muncul terlebih dahulu sebelum variabel di sub-jendela dapat dipanggil, jika tidak, pengecualian akan dilempar
*/
varOpenWindow;
fungsi openSubWin()
{
OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolbar=no, menubar=yes, scrollbar=yes,resizable=yes,location =tidak, status=tidak');
}
fungsi parentInvokeChild()
{
if(OpenWindow)//Tentu saja sub-jendela harus muncul terlebih dahulu sebelum variabel di sub-jendela dapat dipanggil, jika tidak, pengecualian akan dilempar
{
peringatan(OpenWindow.iFrameVair);
}
}
</skrip>
</kepala>
<tubuh>
<nama formulir="form1" id="form1">
<input type="teks" nama="nama pengguna" id="nama pengguna"/>
<input type="button" value="Subhalaman munculan" onclick = "openSubWin()">
<input type="button" value="Uji panggilan variabel global di jendela pop-up" onclick = "parentInvokeChild()">
</bentuk>
</tubuh>
</html>
2.b.html
Kode HTML
<html>
<kepala>
<title>Subhalaman</title>
<skrip tipe="teks/javascript">
/** Fungsi global jendela anak ditambahkan untuk menguji formulir induk yang memanggil fungsi global formulir anak IFrame*/
var iFrameVair = "Uji formulir induk untuk memanggil fungsi global formulir anak IFrame";
fungsiUpdateParent()
{
var _parentWin = jendela.pembuka;
_parentWin.form1.username.value = "xxxx" ;
}
fungsi anakInvokeParent()
{
var parentVairous = window.opener.window.parentVairous;
waspada(indukVairous);
}
</skrip>
</kepala>
<tubuh>
<nama formulir="form1" id="form1">
<p> </p>
<p menyelaraskan="tengah">
<tipe masukan="tombol"
onclick = "UpdateParent();"
nama = "tombol"
id="tombol"
value="Perbarui konten Nama Pengguna halaman utama">
<tipe masukan = "tombol"
nama = "tombol2"
id = "tombol2"
value = "Uji jendela anak IFrame untuk memanggil variabel global jendela induk"
onclick = "childInvokeParent();"/>
</p>
<p> </p>
</bentuk>
</tubuh>
Setelah diingatkan oleh hanjs, sangat penting untuk dicatat bahwa jendela anak dari jendela modal tidak dapat mengubah konten apa pun di halaman jendela induk.
Misalnya, ubah: OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolbar=no, menubar=yes, scrollbars=yes, dapat diubah ukurannya= ya,lokasi=tidak, status=tidak');
Untuk: OpenWindow = window.showModalDialog("b.html",'newwindow',"dialogHeight:100px,center:yes,resizable:no,status:no");
Saat Anda ingin mengubah konten di jendela induk di jendela anak, akan muncul kesalahan bahwa "XX" kosong atau bukan objek, dan "XX" di sini adalah konten di jendela induk yang ingin Anda modifikasi.