Предоставление свойств iframe изнутри

Question

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

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

Проблема, с которой я в настоящее время сталкиваюсь, заключается в том, что я должен вставить файл CSS на родительский сайт, чтобы правильно настроить мой iframe при его рендеринге, и я действительно не думаю, что я должен портить клиентскую страницу вообще поскольку CSS может иметь некоторые конфликты в нем.

Есть ли лучший способ стилизовать iframe, чем текущий способ сделать это?

Answer 1

Вы должны иметь возможность использовать window.frameElement для ссылки на элемент iframe, в который встроена ваша страница. С помощью этой ссылки вы сможете изменить атрибут стиля, чтобы изменить способ отображения кадра.

Answer 2

Я думаю, у вас есть два разных варианта;

Встроенные стили Iframe
Дайте вашему клиенту заранее стиле IFRAME для встраивания, как это

<iframe src="yoururl.com/client" 
     frameborder="0" 
     style="border: 0; width: 100%; height: 600px;"> 
</iframe> 

Вставить через тег сценария
Создайте небольшой скрипт тег (который вы размещаете), что вы предоставляете своему клиенту. Внутри скрипта динамически создать элемент IFrame DOM и, возможно, другие внешние CSS-файлы, которые нужно

Размести файл JS, как //yoururl.com/iframe.js

var iframe = document.createElement("iframe"); 
iframe.setAttribute("src","http://yoururl.com/client"); 
document.write("<div id='mycontainer'></div>"); 
document.getElementById("mycontainer").appendChild(iframe); 

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

<script src="//yoururl.com/iframe.js" type="text/javascript"></script> 

Answer 3

Есть много способов, но это может быть возможно, что никто не применим:

1. Попроси клиент укладывать IFRAME (встроенный или с CSS)
2. опубликовать фреймы содержания на тот же домен основного веб-сайта и проверить, доступен ли родительский кадр через javascript
3. Попросите клиента включить заголовок «Параметры X-Frame». Может быть, с чем-то вроде «ALLOW-FROM SAMEDOMAIN, www.youriframedomain.com». Кажется, он устарел, проверьте вместо этого Content-Security-Policy.
4. встраивать его через тег сценария
5. Check для window.postMessage: он требует в любом случае дополнительный скрипта в основном сайте, который прослушивает сообщения (это может быть сам CSS текст) из фрейма и применяет новый стиль

Answer 4

Вы можете предоставить свой css отдельно клиенту. Если это не вариант, вам нужно сделать это так, как вы делаете сейчас (вводя родительский стиль из iframe).Однако это не кажется хорошей идеей, если только ваши правила css не являются уникальными.