JavaScript
.postMessage () और MessageEvent

वाक्य - विन्यास

• windowObject.postMessage(message, targetOrigin, [transfer]);
• window.addEventListener("message", receiveMessage);

पैरामीटर

शुरू करना

.PostMessage () क्या है, हम इसका उपयोग कब और क्यों करते हैं

.postMessage() विधि क्रॉस-ऑरिजिन स्क्रिप्ट के बीच संचार को सुरक्षित रूप से अनुमति देने का एक तरीका है।

आम तौर पर, दो अलग-अलग पृष्ठ, केवल जावास्क्रिप्ट का उपयोग करते हुए एक दूसरे के साथ सीधे संवाद कर सकते हैं जब वे एक ही मूल के होते हैं, भले ही उनमें से एक दूसरे में एम्बेडेड हो (जैसे iframes ) या एक दूसरे के अंदर से खोला जाता है (जैसे window.open() )। .postMessage() , आप सुरक्षित रहते हुए भी इस प्रतिबंध के आसपास काम कर सकते हैं।

आप केवल .postMessage() उपयोग कर सकते हैं जब आपके पास दोनों पृष्ठों के जावास्क्रिप्ट कोड तक पहुँच हो। चूंकि रिसीवर को प्रेषक को मान्य करने और संदेश को तदनुसार संसाधित करने की आवश्यकता है, आप केवल इस पद्धति का उपयोग दो लिपियों के बीच संवाद करने के लिए कर सकते हैं, जिनकी आपके पास पहुंच है।

हम चाइल्ड विंडो को संदेश भेजने के लिए एक उदाहरण बनाएंगे और उन संदेशों को चाइल्ड विंडो पर प्रदर्शित किया जाएगा। माता-पिता / प्रेषक पृष्ठ को http://sender.com माना जाएगा और उदाहरण के लिए बाल / रिसीवर पृष्ठ http://receiver.com माना जाएगा।

संदेश भेजना

किसी अन्य विंडो में संदेश भेजने के लिए, आपको इसकी window ऑब्जेक्ट के लिए एक संदर्भ होना चाहिए। window.open() नई खोली गई विंडो का संदर्भ ऑब्जेक्ट लौटाता है। अन्य तरीकों के लिए एक विंडो ऑब्जेक्ट का संदर्भ प्राप्त करने के लिए, यहां अन्य otherWindow पैरामीटर के तहत स्पष्टीकरण देखें।

var childWindow = window.open("http://receiver.com", "_blank");

एक textarea और एक send button जोड़ें जिसका उपयोग बाल खिड़की पर संदेश भेजने के लिए किया जाएगा।

<textarea id="text"></textarea>
<button id="btn">Send Message</button>

button क्लिक करने पर .postMessage(message, targetOrigin) का उपयोग करके textarea का पाठ भेजें।

var btn = document.getElementById("btn"),
    text = document.getElementById("text");

btn.addEventListener("click", function () {
    sendMessage(text.value);
    text.value = "";
});

function sendMessage(message) {
    if (!message || !message.length) return;
    childWindow.postMessage(JSON.stringify({
        message: message,
        time: new Date()
    }), 'http://receiver.com');
}

एक साधारण स्ट्रिंग के बजाय JSON ऑब्जेक्ट को भेजने और प्राप्त करने के लिए, JSON.stringify() और JSON.parse() विधियों का उपयोग किया जा सकता है। एक Transfarable Object के तीसरे वैकल्पिक पैरामीटर के रूप में दिया जा सकता है .postMessage(message, targetOrigin, transfer) विधि है, लेकिन ब्राउज़र समर्थन अभी भी आधुनिक ब्राउज़रों में भी कमी है।

इस उदाहरण के लिए, चूंकि हमारे रिसीवर को http://receiver.com पृष्ठ माना जाता है, इसलिए हम इसके url को targetOrigin रूप में targetOrigin । संदेश भेजने के लिए इस पैरामीटर का मान childWindow ऑब्जेक्ट की origin से मेल खाना चाहिए। wildcard रूप में * का उपयोग करना संभव है लेकिन wildcard उपयोग से बचने के लिए अत्यधिक अनुशंसा की जाती है और सुरक्षा कारणों से रिसीवर के विशिष्ट मूल के लिए हमेशा इस पैरामीटर को सेट करें।

संदेश प्राप्त करना, मान्य करना और संसाधित करना

इस भाग के तहत कोड रिसीवर पेज में डाला जाना चाहिए, जो हमारे उदाहरण के लिए http://receiver.com ।

message event प्राप्त करने के लिए, window की message event सुनी जानी चाहिए।

window.addEventListener("message", receiveMessage);

जब एक संदेश प्राप्त होता है तो सुरक्षा के आश्वासन के साथ कुछ कदम उठाए जाने चाहिए ।

• भेजने वाले को मान्य करें
• संदेश को मान्य करें
• संदेश को संसाधित करें

संदेश को एक विश्वसनीय प्रेषक से यह सुनिश्चित करने के लिए प्रेषक को हमेशा मान्य किया जाना चाहिए। उसके बाद, यह सुनिश्चित करने के लिए संदेश को मान्य किया जाना चाहिए कि कुछ भी दुर्भावनापूर्ण नहीं है। इन दो सत्यापनों के बाद, संदेश को संसाधित किया जा सकता है।

function receiveMessage(ev) {
    //Check event.origin to see if it is a trusted sender.
    //If you have a reference to the sender, validate event.source
    //We only want to receive messages from http://sender.com, our trusted sender page.
    if (ev.origin !== "http://sender.com" || ev.source !== window.opener)
        return;

    //Validate the message
    //We want to make sure it's a valid json object and it does not contain anything malicious 
    var data;
    try {
        data = JSON.parse(ev.data);
        //data.message = cleanseText(data.message) 
    } catch (ex) {
        return;
    }

    //Do whatever you want with the received message
    //We want to append the message into our #console div
    var p = document.createElement("p");
    p.innerText = (new Date(data.time)).toLocaleTimeString() + " | " + data.message;
    document.getElementById("console").appendChild(p);
}

इसके उपयोग को दर्शाने वाले JS Fiddle के लिए यहां क्लिक करें।