Междоменный контроль / загрузка iframe с помощью Jquery / CSS - PullRequest
Новая
       16

Междоменный контроль / загрузка iframe с помощью Jquery / CSS

1 голос
/ 21 июня 2019

Мне нужно встроить свой веб-сайт на другой веб-сайт, но удалить верхний и нижний колонтитулы с моего веб-сайта и, по сути, просто показать содержимое.

Встроенный iframe прекрасно загружается и загружает содержимое на страницу, и с помощью onload event я установил видимость таким образом, чтобы при загрузке удалялось «flashing».Отдельно в файле JS я затем удаляю верхний и нижний колонтитулы в готовом документе, который, по-видимому, удаляет их до появления видимости. При первой загрузке все работает нормально.Когда вы перемещаетесь в iframe, щелкая ссылку, например, window reloads с правильной информацией, за исключением нескольких секунд, он загружает верхний и нижний колонтитулы и удаляет их.

В идеале верхний и нижний колонтитулы никогда не должны отображаться вообще.

Событие onload является встроенным JS с iframe, в то время как готовый документ загружается при загрузке iframe.

Код готовности документа (внешние Js) 

   if (window.location !== window.parent.location) {
        setTimeout(function () {
            $('.header').remove();
            $('.footer').remove();
        }, 500);
    }

и код для встраивания в отдельный домен / сайт: 

<script>
function loadIframe() {
   var ifr = document.getElementById("mySite"); 
   ifr.style.height = '75vh'; 
}
</script>

<iframe style="visibility:hidden;" id="mySite" onload="loadIframe()" class="catalog-frame" src="http://xxxxxxx.com/about" width="100%">
</iframe>

По существу, и, возможно,Самый простой способ справиться с этим - при изменении URL-адреса внутри iframe скрыть содержимое, а затем onload, отобразить их снова, но у меня возникают проблемы с определением, будет ли изменяться / изменяться URL-адрес внутри iframe., чтобы скрыть содержимое / скрыть iframe.

Поскольку у меня есть доступ к фактическому содержимому, загружаемому в iframe, есть ли здесь более простое решение, хотя я не буду контролировать родительский домен?

1 Ответ

0 голосов
/ 21 июня 2019

Как вы упомянули, у вас нет контроля над родителем, поэтому, по моему мнению, вы можете сделать следующее:

Добавить тег script в документ head следующим образом: 

if (window.location !== window.parent.location) {
        $("body").css("display", "none");
        //$("loading-pic").css("display", "block");
    }

Затем в нижней части тела добавьте следующий скрипт для функции «готово»: 

$( document ).ready(function() {
   $('.header').remove();
   $('.footer').remove();
   //$("loading-pic").css("display", "none");
   $("body").css("display", "block");
});

Что должно произойти так: всякий раз, когда вы нажимаете любую ссылку на iFrame, ничего не будетпоказано, и когда документ будет готов, наш последний скрипт удалит верхний и нижний колонтитулы, а затем отобразит тело.

Вы также можете показать загрузочную картинку во время загрузки вашего контента.

В качестве альтернативы вы можете использовать переменную для хранения текущего сеанса в iFrame или в отдельном окне, а также отправлять ее как GET или POST для каждой ссылки, а также при необходимости удалять верхний и нижний колонтитулы со стороны сервера.

...