Web Messaging ដែលគេអាចហៅបានម៉្យាងទៀតថា cross-document messaging គឺជាបច្ចេកវិទ្យាថ្មីមួយទៀត ដែលត្រូវបានបញ្ចូលទៅក្នុង HTML5 ។ តាមរយៈបច្ចេកវិទ្យានេះ កូដសរសេរជាភាសា JS ទាំងឡាយនៅក្នុង browser អាចទាក់ទងរវាងគ្នាបាន ទោះបីជាកូដទាំងនោះមកពី server ខុសៗគ្នា យ៉ាងណាក៏ដោយ។
មុនពេលបច្ចេកវិទ្យា cross-document messaging ត្រូវបានបង្កើតឡើង browser មិនបានអនុញ្ញាតអោយកូដជាភាសា JS មកពី domain ខុសៗគ្នា អាចមានទំនាក់ទំនងជាមួយគ្នាបានឡើយ ដោយសារបញ្ហាសុវត្ថិភាព។
ក៏ប៉ុន្តែ ដើម្បីរក្សាសុវត្ថិភាព ទោះជាមិនបានរឹងមាំយ៉ាងណាក៏ដោយ ក៏បច្ចេកវិទ្យា cross-document messaging ផ្តល់លទ្ធភាពអោយអ្នកសរសេរកូដ អាចត្រួតពិនិត្យនិងផ្ទៀងផ្ទាត់មើល domain និងឬទិន្នន័យទាំងឡាយជាមុនសិន មុននឹងអនុញ្ញាតអោយកូដនៅក្នុង domain ខុសៗគ្នាទាំងនោះ អាចមានទំនាក់ទំនងជាមួយគ្នាបាន។ ពិនិត្យកម្មវិធីខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
</head>
<body style="font:14px/1.5 'Odor Mean Chey'">
<form id="form">
<input type="text" placeholder="បញ្ចូលសារ" name="message">
<input type="submit" value="បញ្ជូន">
</form>
<iframe src="http://localhost:9000/iframe.html" id="iframe" style="display:block;height:80px"></iframe>
<script>
form.onsubmit = function() {
var origin = document.getElementsByTagName('iframe')[0];
var val = document.forms["form"]["message"].value;
origin.contentWindow.postMessage(val, 'http://localhost:9000');
return false;
};
window.addEventListener('message', function(event) {
if(event.origin == 'http://localhost:9000'){
alert(`ទិន្នន័យដែលផ្ញើរមកវិញពី domain ${event.origin} គឺ៖ ${event.data}`);
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body style="font:14px/1.5 'Odor Mean Chey'">
<script>
window.addEventListener('message', function(event) {
if (event.origin == 'http://localhost:9000') {
if(event.data == 'needed data'){
alert(`ទិន្នន័យដែលផ្ញើរមកពី domain ${event.origin} ពិតជាត្រឹមត្រូវ!`);
event.source.postMessage('sent back data', event.origin);
}else{
alert(`ទិន្នន័យដែលផ្ញើរមកពី domain ${event.origin} មិនត្រឹមត្រូវទេ!`);
}
}
});
</script>
</body>
</html>
