postMessage实现跨域、跨窗口消息传递
这次给大家带来postMessage实现跨域、跨窗口消息传递，postMessage实现跨域、跨窗口消息传递的注意事项有哪些，下面就是实战案例，一起来看一下。
平时做web开发的时候关于消息传递，除了客户端与服务器传值还有几个经常会遇到的问题
1.页面和其打开的新窗口的数据传递
2.多窗口之间消息传递
3.页面与嵌套的iframe消息传递
4.上面三个问题的跨域数据传递
postMessage()
这些问题都有一些解决办法，但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
postMessage(data,origin)方法接受两个参数
1.data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
http://test.com/index.html
<p style="width:200px; float:left; margin-right:200px;border:solid 1px #333;"> <p id="color">Frame Color</p> </p> <p> <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe> </p>
我们可以在http://test.com/index.html通过postMessage()方法向跨域的iframe页面http://lsLib.com/lsLib.html传递消息
window.onload=function(){
window.frames[0].postMessage('getcolor','http://lslib.com');
}test.com上面的页面向lslib.com发送了消息，那么在lslib.com页面上如何接收消息呢，监听window的message事件就可以
http://lslib.com/lslib.html
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
var color=container.style.backgroundColor;
window.parent.postMessage(color,'*');
},false);这样我们就可以接收任何窗口传递来的消息了，为了安全起见，我们利用这时候的MessageEvent对象判断了一下消息源,MessageEvent是一个这样的东东
有几个重要属性
1.data：顾名思义，是传递来的message
2.source：发送消息的窗口对象
3.origin：发送消息窗口的源（协议+主机+端口号）
这样就可以接收跨域的消息了，我们还可以发送消息回去，方法类似
简单的demo
在这个例子中，左边的p会根据右边iframe内p颜色变化而变化
<!DOCTYPE html>
<html>
<head>
<title>Post Message</title>
</head>
<body>
<p style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
<p id="color">Frame Color</p>
</p>
<p>
<iframe id="child" src="http://lsLib.com/lsLib.html"></iframe>
</p>
<script type="text/javascript">
window.onload=function(){
window.frames[0].postMessage('getcolor','http://lslib.com');
}
window.addEventListener('message',function(e){
var color=e.data;
document.getElementById('color').style.backgroundColor=color;
},false);
</script>
</body>
</html>
http://test.com/index.html<!doctype html>
<html>
<head>
<style type="text/css">
html,body{
height:100%;
margin:0px;
}
</style>
</head>
<body style="height:100%;">
<p id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">
click to change color
</p>
<script type="text/javascript">
var container=document.getElementById('container');
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
var color=container.style.backgroundColor;
window.parent.postMessage(color,'*');
},false);
function changeColor () {
var color=container.style.backgroundColor;
if(color=='rgb(204, 102, 0)'){
color='rgb(204, 204, 0)';
}else{
color='rgb(204,102,0)';
}
container.style.backgroundColor=color;
window.parent.postMessage(color,'*');
}
</script>
</body>
</html>
http://lslib.com/lslib.html在例子中页面加载的时候主页面向iframe发送’getColor‘ 请求（参数没实际用处）
window.onload=function(){
window.frames[0].postMessage('getcolor','http://lslib.com');
}iframe接收消息，并把当前颜色发送给主页面呢
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
var color=container.style.backgroundColor;
window.parent.postMessage(color,'*');
},false);主页面接收消息，更改自己p颜色
window.addEventListener('message',function(e){
var color=e.data;
document.getElementById('color').style.backgroundColor=color;
},false);当点击iframe事触发其变色方法，把最新颜色发送给主页面
function changeColor () {
var color=container.style.backgroundColor;
if(color=='rgb(204, 102, 0)'){
color='rgb(204, 204, 0)';
}else{
color='rgb(204,102,0)';
}
container.style.backgroundColor=color;
window.parent.postMessage(color,'*');
}主页面还是利用刚才监听message事件的程序处理自身变色
window.addEventListener('message',function(e){
var color=e.data;
document.getElementById('color').style.backgroundColor=color;
},false);相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
spring mvc+localResizeIMG实现H5端图片压缩上传
Atas ialah kandungan terperinci postMessage实现跨域、跨窗口消息传递. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Apakah yang dimaksudkan apabila mesej telah dihantar tetapi ditolak oleh pihak lain?
Mar 07, 2024 pm 03:59 PM
Mesej telah dihantar tetapi ditolak oleh pihak lain Ini bermakna maklumat yang dihantar telah berjaya dihantar daripada peranti, tetapi atas sebab tertentu, pihak lain tidak menerima mesej tersebut. Secara lebih khusus, ini biasanya kerana pihak lain telah menetapkan kebenaran tertentu atau mengambil tindakan tertentu, yang menghalang maklumat anda daripada diterima secara normal.
Apakah fail Pengoptimuman Penghantaran dalam Windows 11 dan bolehkah anda memadamkannya?
Sep 29, 2023 pm 04:09 PM
Pengoptimuman Penghantaran ialah ciri yang membantu Kemas Kini Windows dan Gedung Windows berjalan dan menyampaikan kemas kini dengan lebih pantas. Fail cache dalam Pengoptimuman Penghantaran sepatutnya dipadamkan selepas beberapa ketika, tetapi bagi sesetengah pembaca kami, fail tersebut terus menumpuk dan mengambil ruang yang tidak diperlukan. Adakah selamat untuk memadamkan fail pengoptimuman penghantaran? Ya, adalah selamat untuk memadam fail pengoptimuman penghantaran, dan dalam artikel ini, anda akan mengetahui betapa mudahnya untuk melakukannya dalam Windows 11. Walaupun tidak disyorkan untuk memadamkan fail pengoptimuman penghantaran secara manual, anda boleh melakukannya secara automatik. Bagaimana untuk memadam fail pengoptimuman penghantaran pada Windows 11? Klik bar carian, taip Pembersihan Cakera dan buka alat daripada hasil carian. Jika anda mempunyai berbilang pemacu, pilih pemacu dengan sistem anda (biasanya C:
Cara meleret ke kanan dan membalas dengan cepat dalam iMessage pada iOS 17
Sep 20, 2023 am 10:45 AM
Cara Menggunakan Leret untuk Membalas dalam iMessages pada iPhone Nota: Ciri Leret untuk Membalas hanya berfungsi dengan perbualan iMessage dalam iOS 17, bukan perbualan SMS biasa dalam apl Messages. Buka apl Mesej pada iPhone anda. Kemudian, pergi ke perbualan iMessage dan hanya leret ke kanan pada iMessage yang ingin anda balas. Setelah ini dilakukan, iMessage yang dipilih akan menjadi fokus manakala semua mesej lain akan kabur di latar belakang. Anda akan melihat kotak teks untuk menaip balasan dan ikon "+" untuk mengakses apl iMessage seperti Daftar Masuk, Tempat, Pelekat, Foto dan banyak lagi. Hanya masukkan mesej anda,
iOS 17: Cara menggunakan emoji sebagai pelekat dalam Messages
Sep 18, 2023 pm 05:13 PM
Dalam iOS17, Apple telah menambah beberapa ciri baharu pada apl Mesejnya untuk menjadikan komunikasi dengan pengguna Apple lain lebih kreatif dan menyeronokkan. Salah satu cirinya ialah keupayaan untuk menggunakan emoji sebagai pelekat. Pelekat telah wujud dalam apl Mesej selama bertahun-tahun, tetapi setakat ini, ia tidak banyak berubah. Ini kerana dalam iOS17, Apple menganggap semua emoji standard sebagai pelekat, membolehkan ia digunakan dengan cara yang sama seperti pelekat sebenar. Ini pada asasnya bermakna anda tidak lagi terhad untuk memasukkannya ke dalam perbualan. Kini anda juga boleh menyeretnya ke mana-mana sahaja pada gelembung mesej. Anda juga boleh menyusunnya di atas satu sama lain untuk mencipta adegan emoji kecil. Langkah berikut menunjukkan kepada anda cara ia berfungsi dalam iOS17
Mesej telah dihantar tetapi telah ditolak oleh pihak lain Adakah saya patut menyekatnya atau memadamnya?
Mar 12, 2024 pm 02:41 PM
1. Ditambah pada senarai hitam: Jika mesej telah dihantar tetapi ditolak oleh pihak yang satu lagi, ia biasanya disenaraihitamkan Pada masa ini, anda tidak akan dapat menghantar mesej kepada pihak yang satu lagi dan pihak yang satu lagi tidak akan dapat menerima mesej anda. 2. Masalah rangkaian: Jika keadaan rangkaian penerima kurang baik atau terdapat kegagalan rangkaian, mesej mungkin tidak berjaya diterima. Pada ketika ini, anda boleh cuba menunggu sehingga rangkaian kembali normal sebelum menghantar mesej semula. 3. Pihak satu lagi telah menyediakan Jangan Ganggu: Jika penerima telah menyediakan Jangan Ganggu dalam WeChat, mesej penghantar tidak akan diingatkan atau dipaparkan dalam tempoh masa tertentu.
Bagaimana untuk mengedit mesej pada iPhone
Dec 18, 2023 pm 02:13 PM
Apl Mesej asli pada iPhone membolehkan anda mengedit teks yang dihantar dengan mudah. Dengan cara ini, anda boleh membetulkan kesilapan, tanda baca dan juga frasa/perkataan yang salah secara automatik yang mungkin telah digunakan pada teks anda. Dalam artikel ini, kita akan belajar cara mengedit mesej pada iPhone. Cara Mengedit Mesej pada iPhone Diperlukan: iPhone menjalankan iOS16 atau lebih tinggi. Anda hanya boleh mengedit teks iMessage pada apl Messages, dan kemudian hanya dalam masa 15 minit selepas menghantar teks asal. Teks bukan iMessage tidak disokong, jadi ia tidak boleh diambil atau diedit. Lancarkan apl Mesej pada iPhone anda. Dalam Mesej, pilih perbualan dari mana anda ingin mengedit mesej
Bagaimana untuk menyediakan Xiaomi Mi 14 Pro untuk menyalakan skrin untuk mesej?
Mar 18, 2024 pm 12:07 PM
Xiaomi 14Pro ialah model utama dengan prestasi dan konfigurasi yang sangat baik. Ia telah mencapai jualan yang tinggi sejak dikeluarkan secara rasmi Banyak fungsi kecil Xiaomi 14Pro akan diabaikan oleh semua orang fungsinya kecil, , tetapi sangat praktikal Setiap orang akan menghadapi pelbagai masalah apabila menggunakan telefon bimbit Jadi bagaimana untuk menyediakan Xiaomi 14Pro untuk menyalakan skrin untuk mesej. Bagaimana untuk menyediakan Xiaomi Mi 14 Pro untuk menyalakan skrin untuk mesej? Langkah 1: Buka apl Tetapan telefon anda. Langkah 2: Leret ke bawah sehingga anda menemui pilihan "Skrin kunci dan kata laluan" dan klik untuk masuk. Langkah 3: Dalam menu "Skrin kunci & kod laluan", cari dan klik pilihan "Hidupkan skrin untuk pemberitahuan". Langkah 4: Pada halaman "Hidupkan skrin apabila menerima pemberitahuan", hidupkan suis untuk mendayakan
Tarikh keluaran Vivox100s disahkan! Jadilah orang pertama yang mengetahui berita terkini
Mar 22, 2024 pm 02:18 PM
Tarikh keluaran Vivox100s disahkan! Berita terkini telah dipratonton Baru-baru ini, terdapat gelombang keghairahan mengenai Vivox100s dalam dunia teknologi Produk yang dinanti-nantikan ini akhirnya mengesahkan tarikh keluarannya, membuatkan ramai pengguna dan peminat teknologi teruja dengannya. Dilaporkan bahawa Vivox100s akan dikeluarkan secara rasmi pada penghujung bulan ini Apakah kejutan yang akan dibawa oleh produk baharu yang dinanti-nantikan ini. Vivox100s, sebagai karya terbaharu siri Vivox, telah menarik banyak perhatian sejak pendedahannya.
