Как определить, загружен ли уже внешний кадр в одностраничном приложении?

Question

Я создаю одностраничное веб-приложение, которое состоит из 3 частей:

• Заголовок
• Боковая панель для навигации
• I-рамка дляпоказать содержимое главной страницы

Заголовок и боковая панель никогда не должны перезагружаться после первой загрузки страницы - только i-frame.Я использую History API (т. Е. Pushstate) для обработки истории и навигации.

Проблема, с которой я сталкиваюсь, заключается в том, что если кто-то вводит URL-адрес непосредственно на какую-либо страницу сайта, я хочу загрузить заголовоки боковой панели, а затем загрузить страницу, к которой они пошли в I-Frame.Если они уже находятся на странице и щелкают ссылку на другую страницу, я хочу, чтобы она загружала только новую страницу в i-рамку.Я хотел бы сделать это, не испуская историю навигации.

Как я могу обнаружить это и загрузить контент соответствующим образом?

Answer 1

В iframe вы бы использовали небольшой кусочек Javascript, глядя на window.parent и window.top , например:

Javascript в iframe

if (window.parent == window.top) {
  // user loaded the iframe, go to parent 
  window.location = "<your parent url>" + "?iframe=" + window.location;
}

Затем в родительскую загрузку добавляется iframe, обозначенный $_GET['inframe']:

PHP в родительском

if (isset($_GET['inframe']) {
   loadIframe($_GET['inframe']);
}

где я создал функцию loadIframe(), так как вы не предоставили никакого кода, поэтому вы должны заменить его своим собственным.

По соображениям безопасности вы можете отфильтровать ввод с помощью filter_input () :

PHP в родительском

if (isset($_GET['inframe']) {
   loadIframe(filter_input(INPUT_GET, 'inframe'], FILTER_VALIDATE_URL);
}

и выполнить дальнейшие проверки.Таким образом, вы можете запретить людям использовать параметр iframe для внедрения чего-либо вредоносного в ваш код или загружать только любой iframe, который им нравится.

Вместо iframe вы можете использовать AJAX для загрузки контента и избежатьэта проблема в целом.Однако iframe допускает более традиционный способ загрузки контента.