Политика same-origin-policy является важной концепцией в модели безопасности веб-приложений. Политика разрешает запускать скрипты на страницах, происходящих с одного и того же сайта - комбинация схемы, имени хоста и номера порта для доступа к DOM друг друга без особых ограничений, но предотвращает доступ к DOM на разных сайтах. Источник - Википедия.
Как разработчик, мы в какой-то момент столкнулись с проблемой междоменного доступа при создании веб-приложений. Мы сталкиваемся с этими проблемами всякий раз, когда приложение хочет сделать вызовы из самого браузера на страницу, размещенную в другом домене, например, http: / /www.example.com/appPage.html хочет выполнить вызов страницы или службы, размещенной в домене http://www.iframe.com/iframe.html. По умолчанию в качестве ограничения безопасности браузер блокирует этот тип связи, чтобы запретить вредоносным приложениям получать данные или выполнять код без разрешения пользователя.
Но функция «пост-сообщения» HTML5 предоставляет замечательное решение для решения этой проблемы.
Для демонстрации мы возьмем один файл parent.html и i-frame.html и попытаемся получить доступ к iframe.html из parent.html.
Вот наша страница parent.html:
<html> <head> <script type="text/javascript"> window.addEventListener('message', receiveMessage, false); function receiveMessage(event) { alert("got message: " + event.data); } </script> </head> <title> Parent Page </title> <body> <iframe src="http://path.com/Iframe.html" width="500" height="500"></iframe> </body> </html>
Это запустит iframe, а window.addEventListener позаботится о вызове postmessage из iframe.html.
Теперь ниже наша страница Iframe.html.
<html> <head> <script> function send() { window.parent.postMessage('Hello Parent Frame!', '*'); } </script> </head> <title> IFrame Test </title> <body> <h1> Welcome </h1> <p> Hello There </body> <button onclick="send()">Send</button> </body> </html>
Это вызовет функцию window.parent.postMessage () после создания пользователем события click и отправит сообщение «Hello Parent Frame!» На родительскую страницу.
Запустите parent.html и нажмите кнопку отправки, родительская страница получит сообщение «Hello Parent Frame!» В окне предупреждения.
Таким образом, мы можем просто инициировать обмен данными с использованием самого HTML5 без какого-либо стороннего фреймворка.
Делитесь своими мыслями о том же.
Удачного обучения !!!