Несколько распространенных методов междоменного iframe

JavaScript HTML
  • суг команда
  • Автор: Брейди

задний план

С развитием бизнеса некоторые госуслуги естественным образом будут выделяться в публичные компоненты для использования различными проектами. Однако, поскольку технологические стеки, используемые в каждом проекте, различны, этот общий компонент не может быть легко указан. Чтобы решить эту проблему, мы пишем этот компонент в виде отдельной страницы и вешаем его под доменным именем, а другие проекты используют iframe или веб-просмотр для загрузки этой страницы, чтобы добиться простого повторного использования функции.
Однако в этом процессе также возникало много проблем, и один только междоменный домен будет возникать несколько раз. Ниже я расскажу о междоменной проблеме, с которой столкнулся, и о некоторых решениях.

Почему междоменный

Чтобы обеспечить безопасность пользовательской информации, Netscape ввела в 1995 году политику единого источника, согласно которой одно и то же происхождение относится к трем одинаковым вещам: протоколу, доменному имени и порту.
Нарушение политики одного и того же источника вызовет междоменные проблемы, в основном в следующих трех аспектах:

  • Не удалось прочитать куки, localStorage, indexDB
  • Дом недоступен
  • ajax-запрос не может быть отправлен

Сцены

В последнее время я работаю над требованием, и мне нужно использовать iframe, чтобы представить что-то похожее на видеоплеер, упакованный другими. В iframe есть полноэкранная кнопка. После нажатия страница должна сделать iframe полноэкранным. Из-за ограничений политики одного и того же источника iframe не может указать странице, чтобы быть полноэкранным.

Решение

установить домен

Функция document.domain состоит в том, чтобы получить/установить исходную доменную часть текущего документа.Политика одного и того же происхождения будет определять, является ли исходный домен двух документов одинаковым, чтобы определить, является ли он междоменным. Это означает, что пока это значение одинаково, междоменная проблема может быть решена.
Здесь я установил домен как значение доменного имени первого уровня, URL-адрес страницы a — a.demo.com, а URL-адрес страницы b, на которую ссылается iframe на странице a, — b.demo.com. , Конкретные настройки

document.domain = 'demo.com'

После настройки смонтируйте метод, чтобы сделать iframe полноэкранным в окне страницы a

// a页面
window.toggleFullScreen = () => {
    // do something
}

На странице b вы можете напрямую получить объект окна страницы a и вызвать его напрямую.

// b页面
window.parent.toggleFullScreen()

Однако установка этого значения также имеет определенные ограничения, и оно может быть установлено только для домена верхнего уровня текущего документа или значения, совместимого с доменом URL-адреса документа. Если URL-адрес — a.demo.com, домен может быть установлен только как demo.com или a.demo.com. Поэтому способ установки домена можно использовать только для решения ситуации, когда основной домен один и тот же, а поддомены разные.

Использовать промежуточную страницу

Мы также можем использовать доменное имя, но с другой страницей тех же маршрутов, что и середина страницы страницы c, страница b c загружает страницу, c страница вызывает метод a page, включение метода b page вызывает страницу. Конкретные операции заключаются в следующем:
Слой Node на странице A открывает маршрут, этот маршрут загружает страницу C в качестве промежуточной страницы, URL-адрес страницы C — a.demo.com/c. C-страница — это просто простая HTML-страница, а метод A-страницы вызывается для события OnLoad окна.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script>
        window.onload = function () {
            parent.parent.toggleFullScreen();
        }
    </script>
</body>
</html>

Поскольку страница c и страница a соответствуют политике одного и того же источника, можно избежать междоменной проблемы и выполнить полноэкранный метод.

postmessage

Метод window.postMessage может безопасно реализовать связь между источниками, и вы можете отправить ему информацию, написав протокол, адрес хоста или порт целевого окна.

// b页面
parent.postMessage(
    value,
    "http://a.demo.com"
);

// a页面
window.addEventListener("message", function( event ) {
    if (event.origin !== 'http://b.demo.com') return;
    toggleFullScreen()
 });

В целях безопасности после получения информации проверьте event.origin, чтобы определить, отправлено ли оно из окна, которое хочет получить информацию.

Суммировать

С помощью вышеуказанного метода мы можем свободно общаться с iframe.

Категории