Требование 1. Как перенести данные с главной страницы A в iframe B?
Таким образом, главная страница должна передать данные в iframe B, а затем iframe B выполнит определенную обработку после получения данных.
Метод реализации
Хитрость реализации заключается в использовании хеш-значения объекта местоположения для передачи через него данных связи. Нам нужно только установить src iframe B на главной странице A и добавить после него строку #data (данные — это данные, которые вы используете). хочу пройти), как показано на рисунке ниже. Показать:
Затем в iframe B вы можете мгновенно получить данные с помощью какого-либо метода. На самом деле обычно используется следующий метод:
1. Установите таймер с помощью метода setInterval в iframe B и отслеживайте изменения в location.href, чтобы получить вышеуказанную информацию о данных.
2. Затем iframe B может выполнить соответствующую логическую обработку на основе этой информации о данных.
Требование 2. Как iframe B передает данные на главную страницу A?
Таким образом, iframe B должен передать данные на главную страницу, а затем главная страница выполнит определенную обработку после получения данных.
Метод реализации
Хитрость реализации заключается в использовании прокси-сервера IframeC, который встроен в iframe B и должен оставаться в том же домене, что и главная страница A. Затем мы можем использовать его, чтобы полностью использовать принцип реализации первого метода связи, описанного выше, для передачи данные iframe B Для iframeC следующий вопрос — как позволить iframeC передавать данные на главную страницу A, как показано на рисунке ниже:
Поскольку iframeC и главная страница находятся в одном домене, передавать данные между ними становится намного проще. Наш метод заключается в использовании часто используемого атрибута window.top (вы также можете использовать window.parent.parent), который возвращает a. ссылка на объект окна верхнего уровня, загруженный в браузер, чтобы мы могли напрямую использовать метод на главной странице А, ха-ха-ха, просто.
На этом этапе мы делаем простой анализ и подведение итогов.
Предпосылка и самый большой недостаток этой реализации заключается в том, что мы должны контролировать содержимое iframe, но, по крайней мере, наша реализация основана на правилах безопасности браузера и не подрывает безопасность самого приложения.
Некоторые детали, которые следует учитывать при реализации
Постарайтесь принять во внимание простоту использования, масштабируемость и ремонтопригодность, например:
Пусть сторонним приложениям достаточно будет загрузить предоставленный нами исходный файл JS, чтобы легко использовать различные инструменты, которые мы им предоставляем.
Мы организуем вышеупомянутые различные инструменты в виде пакетов, чтобы максимизировать загрузку по требованию.
Начальный файл JS в первом элементе обеспечивает только базовую реализацию метода и помещает в него наиболее часто используемые наборы инструментов, такие как высокоадаптивные
Через исходные файлы мы также предоставляем сторонним приложениям некоторые часто используемые наборы инструментов JS, а указанные наборы инструментов можно использовать напрямую с помощью механизма динамической загрузки, аналогичного модулю YUI3.
Классифицировать данные, передаваемые сторонними приложениями и основными страницами (самовызов, проверка входа в систему, переданные данные и т. д.).
Передаваемые данные используют формат JSON, соответствующий конкретным спецификациям, и отправляются через единый сервисный центр. На главной странице предусмотрен единый сервисный интерфейс для анализа данных и вызова соответствующих методов в соответствии со спецификациями.
Существует также проблема контроля версий. Чтобы минимизировать влияние на сторонние приложения, версии всех вышеупомянутых файлов JS используют стратегию обратной совместимости. Малые версии реализуются с использованием сервера для установки срока действия. Кэш SQUID с определенной частотой. Обновления основных версий изменяются вручную в соответствии с собственными потребностями пользователя.
Конечно, приведенное выше решение может быть не оптимальным, но я просто надеюсь, что оно поможет вам и даст рекомендации. Мы также постепенно совершенствуем некоторые наши методы реализации, такие как контроль версий. У нас также есть некоторые проблемы, которые необходимо решить. решено.
конкретный код
Исходный код главной страницы А
Скопируйте код кода следующим образом:
JS-код
/*Главная страница А*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Главная страница A</title>
<тип сценария="текст/javascript">
функция инициализации(){
document.domain = 'bai.sohu.com';
alert('Я основной фрейм, встроенный в стороннее приложение IframeB, приложение начнет загружаться ниже');
вар iframeTag = document.getElementById('frameB'),
iframeSrc = 'http://test.com/iframePage.html';
iframeTag.src = iframeSrc;
iframeTag.style.display = 'блок';
};
обратный вызов функции(h){
var iframeB = document.getElementById('frameB');
alert('IframeC вызывает мой интерфейс (основной фрейм) и передает мне высоту IframeB. Конкретное значение: ' + h);
iframeB.style.height = h + 10 + 'px';
iframeB.src += '#'+ ч
};
</скрипт>
</голова>
<body onload="init();">
<p>Я — фрейм главной страницы, и мой домен: bai.sohu.com</p>
<iframe id="frameB" style="display:none;"></iframe>
</тело>
</html>
Исходный код iframeB (iframePage.html)
Скопируйте код кода следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframeB</title>
</голова>
<body onload="init();">
<p style="height:500px;">Я использую стороннее приложение, и мой домен: test.com</p>
<iframe id="frameC" style="height:1px;width:1px;display:none;"></iframe>
</тело>
</html>
<тип сценария="текст/javascript">
функция инициализации(){
alert('Я стороннее приложение. Давайте создадим канал связи IframeC в том же домене, что и основной фрейм, зададим его src и используем знак # для передачи значения высоты');
вар iframeTag = document.getElementById('frameC'),
iframeSrc = 'http://bai.sohu.com/iframePageC.html#',
pageHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
iframeTag.src = iframeSrc + pageHeight;
iframeTag.style.display = 'блок';
window.setTimeout(функция(){
alert('Главная страница устанавливает источник моего (IframeB) и передает мне высоту, которую она получает через Hash (#): ' + location.hash);
}, 2000);
};
</скрипт>
Исходный код iframeC (iframePageC.html)
Скопируйте код кода следующим образом:
<тип сценария="текст/javascript">
document.domain = 'bai.sohu.com';
alert('Я (IframeC) получил iframeB, передав мне значение высоты через параметр (#), теперь я вызываю метод главной страницы, чтобы установить высоту IframeB');
top.callback(window.location.href.split('#')[1]);
</скрипт>