تعليق: يقدم هذا المقال ملخصًا مفصلاً لاستخدام ما بعد الولادة في اتصالات HTML5 عبر المجال. يمكن للأصدقاء الذين يحتاجون إليها أن يأتي ويشيروا إليها. آمل أن يكون ذلك مفيدًا للجميع.
PostMessagePortal.html رمز الصفحة
<! doctype html>
<title> العنوان </title>
<link Href = "Styles.css">
<link href = "http://apress.com/favicon.ico">
<script> </p> <p> var targetorigin = "http://22527.vhost20.boxcdn.cn" ؛ </p> var defaultTiTle = "portal" ؛
var null = null ؛ </p> <p> function messageHandler (e) {
if (e.origin == targetorigin) {
إخطار (e.data) ؛
} آخر {
// تجاهل الرسائل من أصول أخرى
}
} </p> <p> دالة sendString (s) {
document.getElementById ("widget"). contentWindow.postMessage (S ، Targetorigin) ؛
} </p> <p>
وظيفة الإخطار (الرسالة) {
stopblinking () ؛
Blinktitle (رسالة ، defaultTitle) ؛
} </p> <p> function stopblinking () {
إذا (إخطار! == null) {
ClearTimeout (الإخطار) ؛
}
document.title = defaultTitle ؛
} </p> <p> function Blinktitle (M1 ، M2) {
document.title = m1 ؛
الإخطار = setTimeout (Blinktitle ، 1000 ، M2 ، M1)
} </p> <p> الدالة sendstatus () {
var statustext = document.getElementById ("Statustext"). القيمة ؛
SendString (Statustext) ؛
} </p> <p> function loadDemo () {
document.getElementById ("sendbutton"). addeventListener ("Click" ، SendStatus ، True) ؛
document.getElementById ("stopbutton"). addeventListener ("Click" ، stopblinking ، true) ؛
SendStatus () ؛
}
Window.AdDeventListener ("load" ، loadDemo ، true) ؛
Window.AdDeventListener ("Message" ، MessageHandler ، True) ؛ </p> <p> </script> </p> <p> <h1> اتصال عبر المجال </h1>
معلومات الإرسال: <type type = "text" value = "Online">
<button> تأكيد </button>
<iframe src = "http://22527.vhost20.boxcdn.cn/postmessageWidget.html"> </frame>
<p>
<button> توقف عن وميض العنوان </button>
</p>
رمز صفحة postmessageWidget.html
<! doctype html>
<title> العنوان </title>
<link Href = "Styles.css">
<script> </p> <p> var targetorigin = "http://www.weixiu0376.cn" ؛ </p> <p> // todo whitelist Array </p> <p> messageHandler (e) {{
if (e.origin === "http://www.weixiu0376.cn") {
document.getElementById ("الحالة"). textContent = e.data ؛
} آخر {
// تجاهل الرسائل من أصول أخرى
}
} </p> <p> دالة sendString (s) {
window.top.postmessage (S ، Targetorigin) ؛
} </p> <p> function loadDemo () {
document.getElementById ("Actionbutton"). addeventListener ("Click" ،
وظيفة() {
var messageText = document.getElementById ("messageText"). القيمة ؛
SendString (messageText) ؛
} ، صحيح) ؛ </p> <p>}
Window.AdDeventListener ("load" ، loadDemo ، true) ؛
Window.AdDeventListener ("Message" ، MessageHandler ، True) ؛ </p> <p> </script>
<p> عرض معلومات الاستقبال: <strong> </strong> <p>
<viv>
<input type = "text" value = "املأ محتوى الرسالة">
<button> أرسل رسالة </button>
</div>