Bagaimana untuk mendapatkan elemen halaman induk daripada subhalaman html

Cara untuk mendapatkan elemen halaman induk dalam subhalaman HTML memerlukan contoh kod khusus

Dalam membangunkan halaman web, kadangkala kita perlu mendapatkan elemen halaman induk dalam subhalaman untuk melaksanakan beberapa operasi atau data interaksi. Artikel ini akan memperkenalkan cara mendapatkan elemen halaman induk dalam subhalaman HTML dan memberikan contoh kod khusus.

1. Gunakan objek window.parent JavaScript

Dalam HTML, anda boleh menggunakan objek window.parent JavaScript untuk mendapatkan elemen halaman induk. Langkah-langkah khusus adalah seperti berikut:

1. Tambah kod JavaScript pada subhalaman

Dalam fail HTML subhalaman, tambahkan kod JavaScript berikut:

// Dapatkan elemen halaman induk
var parentElement = window. parent.document.getElementById('parent-element-id');

// Manipulasi atau gunakan elemen halaman induk
parentElement.innerHTML = "Ini adalah pengubahsuaian daripada halaman anak";
< ;/script>

di atas Dalam kod, mula-mula gunakan window.parent untuk mendapatkan objek dokumen halaman induk, dan kemudian gunakan document.getElementById untuk mendapatkan elemen dengan id yang ditentukan dalam halaman induk. Selepas mendapatkan elemen halaman induk, anda boleh mengendalikan atau menggunakannya.

2. Tambah id ke halaman induk

Dalam fail HTML halaman induk, anda perlu menambah id pada elemen yang akan diperolehi, supaya elemen tersebut boleh diperolehi oleh id dalam halaman anak. Contohnya:

Kandungan elemen halaman induk

Dengan menambahkan id pada elemen halaman induk, anda boleh menggunakan dokumen dengan mudah dalam halaman kanak-kanak getElementById untuk mendapatkan elemen.

2. Gunakan PostMessage untuk komunikasi merentas halaman

Selain menggunakan objek window.parent, anda juga boleh menggunakan PostMessage untuk komunikasi merentas halaman, supaya halaman anak boleh mendapatkan data elemen halaman induk. Langkah-langkah khusus adalah seperti berikut:

1. Tambahkan pendengar PostMessage ke halaman induk

Dalam kod JavaScript halaman induk, tambah kod berikut:

<script><br> //Dengar acara mesej<br> window.addEventListener('message' , function(event) {</script>

// 获取子页面发送的消息
var message = event.data;

// 查找父页面的元素
var parentElement = document.getElementById('parent-element-id');

// 操作或使用父页面的元素
parentElement.innerHTML = message;

});

Dalam kod di atas, gunakan window.addEventListener untuk mendengar acara mesej. Apabila halaman anak menghantar mesej melalui PostMessage, halaman induk boleh mendengar melalui acara mesej dan mendapatkan mesej yang dihantar oleh halaman anak. Selepas mendapat mesej, anda boleh melakukan operasi yang sepadan berdasarkan kandungan mesej.

2. Hantar mesej PostMessage dalam halaman anak

Dalam halaman anak, gunakan kod berikut untuk menghantar mesej ke halaman induk:

//Hantar mesej ke halaman induk
var message = "Ini daripada mesej halaman kanak-kanak";
window.parent.postMessage(mesej, 'URL halaman induk');

Dalam kod di atas, mesej yang akan dihantar ke halaman induk ditakrifkan dahulu, dan kemudian window.parent digunakan Kaedah .postMessage menghantar mesej ke halaman induk. Perlu diingatkan bahawa parameter kedua ialah URL halaman induk.

Dengan menggunakan PostMessage untuk komunikasi merentas halaman, halaman anak boleh mendapatkan data elemen halaman induk dengan lebih fleksibel.

Ringkasan:

Artikel ini memperkenalkan cara mendapatkan elemen halaman induk dalam subhalaman HTML dan menyediakan contoh kod khusus. Sama ada menggunakan objek window.parent JavaScript atau menggunakan PostMessage untuk komunikasi merentas halaman, halaman anak boleh mendapatkan data elemen halaman induk. Pembangun boleh memilih kaedah yang sesuai untuk melaksanakan operasi yang sepadan berdasarkan keperluan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan elemen halaman induk daripada subhalaman html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!