У меня есть простая страница, которая имеет несколько разделов iframe (для отображения ссылок RSS). Как применить тот же формат CSS с главной страницы к странице, отображаемой в iframe?
Это возможно, но только если домен iframe совпадает с доменом родителя
gawpertron
13
gawpertron, просто чтобы уточнить, вы говорите, что если я использую контент iFrame из какого-то другого домена, который я не контролирую, я не смогу контролировать CSS для этого контента?
Ville M
Можете ли вы перечислить ссылку на страницу, чтобы мы могли просто просмотреть наши изменения.
5
Домен, порт и протокол должны быть одинаковыми, также не работает с поддоменами.
Ли Пенкман
Ответы:
434
Изменить: Это не работает кросс-домен, если не установлен соответствующий заголовок CORS .
Здесь есть две разные вещи: стиль блока iframe и стиль страницы, встроенной в iframe. Вы можете установить стиль блока iframe обычным способом:
Пожалуйста, обратите внимание, мне кажется, что некоторые примеры, опубликованные ранее, теперь недействительны для html5. Вы можете получить доступ содержимого фрейма следующим образом : document.getElementById("myframe").contentDocument. Однако встраивание CSS все еще не работает для меня.
Рено Линдек
35
ссылка может появиться только в ГОЛОВЕ
Кну
18
У меня работало только тогда, когда я это делал ...document.head.appendChild(cssLink)- Firefox и Safari.
Моджуба
24
Это на самом деле работает кросс-домен? Я не думаю, что это будет.
Саймон Ист
89
Точно так же № 1 еще должен проверить это, чтобы выяснить: правильно, он не работает междоменный. Сразу после выполнения frame ['name'] вы получаете «Небезопасная попытка JavaScript получить доступ к фрейму с URL-бла из фрейма с URL-бла. Домены, протоколы и порты должны совпадать».
Кевин
205
Я столкнулся с этой проблемой в Календаре Google . Я хотел стилизовать его на более темном фоне и изменить шрифт.
К счастью, URL из встраиваемого кода не имеет ограничений на прямой доступ, поэтому с помощью функции PHP file_get_contentsможно получить весь контент со страницы. Вместо того, чтобы вызывать URL-адрес Google, можно вызвать php-файл, расположенный на вашем сервере, например. google.php, который будет содержать оригинальный контент с изменениями:
Вы можете назвать это взломом по определению, если хотите. Но вы не предложили лучшего решения ... Это решение не способ нанести вред службе Google или обмануть людей, чтобы использовать их слабости.
SequenceDigitale.com
5
Я хотел бы убить способ заставить это решение работать с Google Docs. Это бросает все виды ошибок JavaScript. «Uncaught TypeError: Невозможно прочитать свойство« a »с неопределенным значением»
@ChrisHoughton FYI, это в основном не так. Это может, однако, сделать весь iframe бессмысленным (например, одна из причин использования iframe - в целях безопасности, например, с платежами по карте, и если вы сделаете то, что предлагается здесь, у вас, вероятно, возникнут проблемы).
Аластер
10
Делая это, вы всегда получаете календарь как не авторизованный пользователь. При использовании обычного html iframe пользователь будет видеть свой личный календарь, если он вошел в Google, но, поскольку ваш PHP-код не может знать идентификатор сеанса Google, он не может получить их личный календарь.
17
72
Если содержимое iframe находится не полностью под вашим контролем, или вы хотите получить доступ к содержимому с разных страниц с разными стилями, вы можете попробовать манипулировать им с помощью JavaScript.
var frm = frames['frame'].document;var otherhead = frm.getElementsByTagName("head")[0];var link = frm.createElement("link");
link.setAttribute("rel","stylesheet");
link.setAttribute("type","text/css");
link.setAttribute("href","style.css");
otherhead.appendChild(link);
Обратите внимание, что в зависимости от того, какой браузер вы используете, это может работать только на страницах, обслуживаемых из того же домена.
@deweydb Я использовал его с междоменным iframe. но я могу только попросить у тебя прощения!
Рами Сариеддин
@ramie, а вы тестировали это в нескольких браузерах? большинство браузеров выдают ошибку безопасности.
deweydb
Я видел эту идею раньше, но добавляю ссылку на файл, это действительно здорово и профессионально ... + вверх
J.Tural
29
В большинстве браузеров iframe универсально обрабатывается как другая HTML-страница. Если вы хотите применить ту же таблицу стилей к содержимому iframe, просто назовите ее со страниц, используемых там.
Вот как применить код CSS напрямую, без использования <link>для загрузки дополнительной таблицы стилей.
var head = jQuery("#iframe").contents().find("head");var css ='<style type="text/css">'+'#banner{display:none}; '+'</style>';
jQuery(head).append(css);
Это скрывает баннер на странице iframe. Спасибо вам за ваши предложения!
Нужен ли для этого iframe с идентификатором iframe?
Джереми
1
@jmalais Просто замените #iframeс #<id>или даже iframeвыбрать все iframeS
Зеб Маккоркл
3
Кажется, это не работает для меня. У iframe, который я пытаюсь отредактировать, также нет головы прямо под ним в dom. Значит ли это, что мне нужен доступ к заголовку внутри html-документа или это то, что функция поиска jquery должна выполнять сама?
Дэвид А. Френч
1
Проверьте консоль и похоже, что она заблокирована от доступа к содержимому iframe из-за несоответствия домена. В настоящее время я использую Chrome и размещаю свою среду разработки локально.
Дэвид А. Френч
Uncaught DOMException: заблокировал фрейм с источником, это дает мне эту ошибку
priyanka patel
26
Если вы управляете страницей в iframe, как сказал Hangy, самый простой подход - создать общий CSS-файл с общими стилями, а затем просто дать ссылку на него со своих html-страниц.
В противном случае маловероятно, что вы сможете динамически изменять стиль страницы с внешней страницы в вашем фрейме. Это связано с тем, что браузеры ужесточили меры безопасности для межкадровых сценариев из-за возможного неправильного использования для подмены и других хаков.
Этот учебник может предоставить вам больше информации о скриптовых фреймах в целом. О межкадровом сценарии объясняются ограничения безопасности с точки зрения IE.
var cssLink = document.createElement("link")
cssLink.href ="pFstylesEditor.css";
cssLink.rel ="stylesheet";
cssLink.type ="text/css";//Instead of this//frames['frame1'].document.body.appendChild(cssLink);//Do thisvar doc=document.getElementById("edit").contentWindow.document;//If you are doing any dynamic writing do that first
doc.open();
doc.write(myData);
doc.close();//Then append child
doc.body.appendChild(cssLink);
Если вы хотите повторно использовать CSS и JavaScript с главной страницы, возможно, вам стоит подумать о замене <IFRAME>контента, загруженного Ajax. Это более оптимизировано для SEO, когда поисковые роботы могут выполнять JavaScript.
Это пример jQuery, который включает другую HTML-страницу в ваш документ. Это гораздо более дружественный, чем SEO iframe. Чтобы убедиться, что боты не индексируют включенную страницу, просто добавьте ее, чтобы запретить вrobots.txt
Вы также можете включить jQuery непосредственно из Google: http://code.google.com/apis/ajaxlibs/documentation/ - это означает необязательное автоматическое включение более новых версий и значительное увеличение скорости. Кроме того, это означает, что вы должны доверять им за то, что они предоставили вам только jQuery;)
Другие ответы здесь, похоже, используют ссылки jQuery и CSS.
Этот код использует ванильный JavaScript. Это создает новый <style>элемент. Он устанавливает текстовое содержимое этого элемента как строку, содержащую новый CSS. И он добавляет этот элемент непосредственно в заголовок документа iframe.
Когда вы говорите «doc.open ()», это означает, что вы можете написать любой тег HTML внутри iframe, поэтому вы должны написать все основные теги для страницы HTML, и если вы хотите иметь ссылку CSS в вашей голове iframe, просто напишите iframe со ссылкой на CSS. Я приведу вам пример:
Если ваш iframe имеет другое происхождение, механизм CORS не допустит этот обходной путь.
г-н Андерсон
Что если в iframe-url CORS включен для всех местоположений?
августа
6
Вы не сможете стилизовать содержимое iframe таким образом. Я бы предложил использовать серверные сценарии (PHP, ASP или Perl) или найти онлайн-сервис, который преобразует канал в код JavaScript. Единственный способ сделать это - включить серверное включение.
Осторожнее, когда вы говорите, что что-то не может быть сделано, когда на самом деле это просто сложно
Lathan
4
Если у вас есть доступ к странице iframe и вы хотите, чтобы другой CSS применялся к ней только тогда, когда вы загружаете ее через iframe на своей странице, здесь я нашел решение для такого рода вещей.
это работает, даже если iframe загружает другой домен
проверить о postMessage()
план, отправьте css в iframe как сообщение
iframenode.postMessage('h2{color:red;}','*');
* отправить это сообщение независимо от того, в каком домене оно находится в iframe
и получите сообщение в iframe и добавьте полученное сообщение (CSS) в заголовок документа.
Поскольку для одних и тех же доменов написано много ответов, я напишу, как это сделать в кросс-доменах.
Во-первых, вам нужно знать API Post Message . Нам нужен мессенджер для связи между двумя окнами.
Вот мессенджер, которого я создал.
/**
* Creates a messenger between two windows
* which have two different domains
*/classCrossMessenger{/**
*
* @param {object} otherWindow - window object of the other
* @param {string} targetDomain - domain of the other window
* @param {object} eventHandlers - all the event names and handlers
*/constructor(otherWindow, targetDomain, eventHandlers ={}){this.otherWindow = otherWindow;this.targetDomain = targetDomain;this.eventHandlers = eventHandlers;
window.addEventListener("message",(e)=>this.receive.call(this, e));}
post(event, data){try{// data obj should have event namevar json = JSON.stringify({
event,
data
});this.otherWindow.postMessage(json,this.targetDomain);}catch(e){}}
receive(e){var json;try{
json = JSON.parse(e.data ? e.data :"{}");}catch(e){return;}var eventName = json.event,
data = json.data;if(e.origin !==this.targetDomain)return;if(typeofthis.eventHandlers[eventName]==="function")this.eventHandlers[eventName](data);}}
Использование этого в двух окнах для общения может решить вашу проблему.
В главных окнах
var msger =newCrossMessenger(iframe.contentWindow,"https://iframe.s.domain");var cssContent =Array.prototype.map.call(yourCSSElement.sheet.cssRules, css_text).join('\n');
msger.post("cssContent",{
css: cssContent
})
Итак, вы хотите оформить эти два раздела следующим образом:
1. Стиль для раздела iFrame
Это может стилизовать использование CSS с этим уважаемым idили classименем. Вы можете просто стилизовать его в своих родительских таблицах стилей.
<style>#my_iFrame{height:300px;width:100%;position:absolute;top:0;left:0;border:1px black solid;}</style><iframename='iframe1'id="my_iFrame"src="#"cellspacing="0"></iframe>
2. Стиль страницы, загруженной в iFrame
Эти стили могут быть загружены с родительской страницы с помощью Javascript
var cssFile = document.createElement("link")
cssFile.rel ="stylesheet";
cssFile.type ="text/css";
cssFile.href ="iFramePage.css";
затем установите этот файл CSS в соответствующий раздел iFrame
//to Load in the Body Part
frames['my_iFrame'].document.body.appendChild(cssFile);//to Load in the Head Part
frames['my_iFrame'].document.head.appendChild(cssFile);
Здесь вы также можете редактировать заголовок страницы внутри iFrame также
var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead.append(
$("<link/>",{
rel:"stylesheet",
href: urlPath,
type:"text/css"}));
Я проверял этот ответ много раз, что richTextFieldздесь?
Киранкумар Дафда
1
это имя iframe
Jeeva
Я не пробовал, но я думаю, что не будет, потому что это против песочницы
Jeeva
1
Я думаю, что самый простой способ - добавить еще один div в том же месте, что и iframe, тогда
сделайте его z-indexбольше, чем контейнер iframe, так что вы можете просто создать свой собственный div. Если вам нужно нажать на нее, просто используйтеpointer-events:none на своем собственном div, так что iframe будет работать, если вам нужно нажать на него;)
Ответы:
Изменить: Это не работает кросс-домен, если не установлен соответствующий заголовок CORS .
Здесь есть две разные вещи: стиль блока iframe и стиль страницы, встроенной в iframe. Вы можете установить стиль блока iframe обычным способом:
Стиль страницы, встроенной в iframe, должен быть установлен путем включения его в дочернюю страницу:
Или его можно загрузить с родительской страницы с помощью Javascript:
источник
document.getElementById("myframe").contentDocument
. Однако встраивание CSS все еще не работает для меня....document.head.appendChild(cssLink)
- Firefox и Safari.Я столкнулся с этой проблемой в Календаре Google . Я хотел стилизовать его на более темном фоне и изменить шрифт.
К счастью, URL из встраиваемого кода не имеет ограничений на прямой доступ, поэтому с помощью функции PHP
file_get_contents
можно получить весь контент со страницы. Вместо того, чтобы вызывать URL-адрес Google, можно вызвать php-файл, расположенный на вашем сервере, например.google.php
, который будет содержать оригинальный контент с изменениями:Добавление пути к вашей таблице стилей:
(Это сделает вашу таблицу стилей последней перед
head
конечным тегом.)Укажите базовый URL-адрес из исходного URL-адреса в случае, если css и js называются относительно:
Окончательный
google.php
файл должен выглядеть так:Затем вы меняете
iframe
код встраивания на:Удачи!
источник
Если содержимое iframe находится не полностью под вашим контролем, или вы хотите получить доступ к содержимому с разных страниц с разными стилями, вы можете попробовать манипулировать им с помощью JavaScript.
Обратите внимание, что в зависимости от того, какой браузер вы используете, это может работать только на страницах, обслуживаемых из того же домена.
источник
<iframe onload="this.contentDocument.body.style.overflow='hidden';" />
источник
В большинстве браузеров iframe универсально обрабатывается как другая HTML-страница. Если вы хотите применить ту же таблицу стилей к содержимому iframe, просто назовите ее со страниц, используемых там.
источник
Вот как применить код CSS напрямую, без использования
<link>
для загрузки дополнительной таблицы стилей.Это скрывает баннер на странице iframe. Спасибо вам за ваши предложения!
источник
iframe
?#iframe
с#<id>
или дажеiframe
выбрать всеiframe
SЕсли вы управляете страницей в iframe, как сказал Hangy, самый простой подход - создать общий CSS-файл с общими стилями, а затем просто дать ссылку на него со своих html-страниц.
В противном случае маловероятно, что вы сможете динамически изменять стиль страницы с внешней страницы в вашем фрейме. Это связано с тем, что браузеры ужесточили меры безопасности для межкадровых сценариев из-за возможного неправильного использования для подмены и других хаков.
Этот учебник может предоставить вам больше информации о скриптовых фреймах в целом. О межкадровом сценарии объясняются ограничения безопасности с точки зрения IE.
источник
Выше с небольшим изменением работает:
Отлично работает с ff3 и ie8 как минимум
источник
dynamic data
Если вы хотите повторно использовать CSS и JavaScript с главной страницы, возможно, вам стоит подумать о замене
<IFRAME>
контента, загруженного Ajax. Это более оптимизировано для SEO, когда поисковые роботы могут выполнять JavaScript.Это пример jQuery, который включает другую HTML-страницу в ваш документ. Это гораздо более дружественный, чем SEO
iframe
. Чтобы убедиться, что боты не индексируют включенную страницу, просто добавьте ее, чтобы запретить вrobots.txt
Вы также можете включить jQuery непосредственно из Google: http://code.google.com/apis/ajaxlibs/documentation/ - это означает необязательное автоматическое включение более новых версий и значительное увеличение скорости. Кроме того, это означает, что вы должны доверять им за то, что они предоставили вам только jQuery;)
источник
Следующее сработало для меня.
источник
Uncaught TypeError: Cannot read property 'open' of undefined
Расширение на вышеупомянутое решение jQuery, чтобы справиться с любыми задержками в загрузке содержимого кадра.
источник
Моя компактная версия :
Однако иногда
iframe
он не готов к загрузке окна, поэтому необходимо использовать таймер .Готовый код (с таймером):
... и ссылка JQuery:
источник
Другие ответы здесь, похоже, используют ссылки jQuery и CSS.
Этот код использует ванильный JavaScript. Это создает новый
<style>
элемент. Он устанавливает текстовое содержимое этого элемента как строку, содержащую новый CSS. И он добавляет этот элемент непосредственно в заголовок документа iframe.источник
Когда вы говорите «doc.open ()», это означает, что вы можете написать любой тег HTML внутри iframe, поэтому вы должны написать все основные теги для страницы HTML, и если вы хотите иметь ссылку CSS в вашей голове iframe, просто напишите iframe со ссылкой на CSS. Я приведу вам пример:
источник
Использование может попробовать это:
источник
Вы не сможете стилизовать содержимое iframe таким образом. Я бы предложил использовать серверные сценарии (PHP, ASP или Perl) или найти онлайн-сервис, который преобразует канал в код JavaScript. Единственный способ сделать это - включить серверное включение.
источник
Если у вас есть доступ к странице iframe и вы хотите, чтобы другой CSS применялся к ней только тогда, когда вы загружаете ее через iframe на своей странице, здесь я нашел решение для такого рода вещей.
это работает, даже если iframe загружает другой домен
проверить о
postMessage()
план, отправьте css в iframe как сообщение
*
отправить это сообщение независимо от того, в каком домене оно находится в iframeи получите сообщение в iframe и добавьте полученное сообщение (CSS) в заголовок документа.
код для добавления на страницу iframe
источник
Поскольку для одних и тех же доменов написано много ответов, я напишу, как это сделать в кросс-доменах.
Во-первых, вам нужно знать API Post Message . Нам нужен мессенджер для связи между двумя окнами.
Вот мессенджер, которого я создал.
Использование этого в двух окнах для общения может решить вашу проблему.
В главных окнах
Затем получите событие от Iframe.
В Iframe:
См. Полный учебник по Javascript и Iframes для более подробной информации.
источник
Я нашел другое решение, чтобы поместить стиль в основной HTML, как это
а затем в iframe сделать это (см. JS Onload)
и в JS
Возможно, это не лучшее решение, и, безусловно, его можно улучшить, но это еще один вариант, если вы хотите сохранить тег «style» в родительском окне.
источник
Здесь есть две вещи внутри домена
Итак, вы хотите оформить эти два раздела следующим образом:
1. Стиль для раздела iFrame
Это может стилизовать использование CSS с этим уважаемым
id
илиclass
именем. Вы можете просто стилизовать его в своих родительских таблицах стилей.2. Стиль страницы, загруженной в iFrame
Эти стили могут быть загружены с родительской страницы с помощью Javascript
затем установите этот файл CSS в соответствующий раздел iFrame
Здесь вы также можете редактировать заголовок страницы внутри iFrame также
источник
Мы можем вставить тег стиля в iframe. Размещено также здесь ...
источник
источник
richTextField
здесь?Я думаю, что самый простой способ - добавить еще один div в том же месте, что и iframe, тогда
сделайте его
z-index
больше, чем контейнер iframe, так что вы можете просто создать свой собственный div. Если вам нужно нажать на нее, просто используйтеpointer-events:none
на своем собственном div, так что iframe будет работать, если вам нужно нажать на него;)Надеюсь, это кому-нибудь поможет;)
источник
Существует замечательный сценарий, который заменяет узел самой версией iframe. CodePen Demo
Примеры использования:
источник
В качестве альтернативы вы можете использовать технологию CSS-in-JS, как показано ниже: lib:
https://github.com/cssobj/cssobj
Он может внедрить JS-объект как CSS в iframe, динамически
источник
Это всего лишь концепция, но не реализуйте ее без проверок безопасности и фильтрации! В противном случае скрипт может взломать ваш сайт!
Ответ: если вы управляете целевым сайтом, вы можете настроить скрипт получателя так:
1) установить ссылку iframe с
style
параметром, например:(последняя фраза
a{color:red}
кодируетсяurlencode
функцией.2) установить страницу получателя
target.php
так:источник
Ну, я следовал за этими шагами:
iframe
iframe
кdiv
.Это работает в IE 6. Должно работать в других браузерах, проверьте!
источник