Как применить CSS к iframe?

Я столкнулся с этой проблемой с Календарем Google. Я хотел 9X_css3 сделать его более темным фоном и изменить 9X_rssfeed шрифт.

К счастью, URL-адрес из встроенного 9X_css3 кода не имел ограничений на прямой доступ, поэтому 9X_divs с помощью функции PHP file_get_contents можно получить весь 9X_css-layout контент со страницы. Вместо вызова URL-адреса 9X_max-width Google можно вызвать файл php, расположенный 9X_div на вашем сервере, например. google.php, который будет 9X_webpage содержать исходный контент с изменениями:

$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');

Добавление 9X_div-layouts пути к вашей таблице стилей:

$content = str_replace('','', $content);

(Это поместит 9X_iframe вашу таблицу стилей последней перед закрывающим 9X_rssfeed тегом head.)

Укажите базовый URL-адрес из исходного 9X_span URL-адреса в случае, если css и js вызываются 9X_inline-block относительно:

$content = str_replace('','', $content);

Окончательный файл google.php должен 9X_html5 выглядеть следующим образом:

','', $content);
$content = str_replace('','', $content);
echo $content;

Затем вы меняете 9X_iframe код внедрения iframe на:

Удачи!

Если содержимое iframe не полностью находится 9X_max-width под вашим контролем или вы хотите получить 9X_webpage доступ к содержимому с разных страниц с 9X_max-width разными стилями, вы можете попробовать управлять 9X_html им с помощью 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);

Обратите внимание, что 9X_css-classes в зависимости от того, какой браузер вы 9X_iframes используете, это может работать только на 9X_webpage страницах, обслуживаемых из того же домена.

var $head = $("#eFormIFrame").contents().find("head");

$head.append($("", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));
9X_max-width

Вот как применить код CSS напрямую, не используя 9X_html5 для загрузки дополнительной таблицы стилей.

var head = jQuery("#iframe").contents().find("head");
var css = '';
jQuery(head).append(css);

Баннер 9X_rssfeed скрывается на странице iframe. Спасибо за 9X_divs ваши предложения!

Если вы управляете страницей в iframe, как 9X_css сказал Хангей, самый простой подход - создать 9X_span общий файл CSS с общими стилями, а затем 9X_webpage просто связать его со своими html-страницами.

В 9X_rssfeed противном случае вы вряд ли сможете динамически 9X_div изменять стиль страницы с внешней страницы 9X_css в вашем iframe. Это связано с тем, что браузеры 9X_html5 ужесточили безопасность кросс-фрейм-сценариев 9X_inline-block из-за возможного неправильного использования 9X_css-layout для спуфинга и других взломов.

This tutorial может предоставить 9X_divs вам дополнительную информацию о создании 9X_div-layouts скриптов для iframe в целом. About cross frame scripting объясняет 9X_rss ограничения безопасности с точки зрения 9X_rss IE.

Окно iframe универсально обрабатывается 9X_max-height большинством браузеров как другая HTML-страница. Если 9X_iframes вы хотите применить ту же таблицу стилей 9X_css к содержимому iframe, просто укажите на 9X_divs нее ссылку со страниц, которые там используются.

Вышеупомянутое с небольшими изменениями 9X_css-layout работает:

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 this

var 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);

Отлично работает как минимум с 9X_css3 ff3 и ie8

У меня сработало следующее.

var iframe = top.frames[name].document;
var css = '' +
          '';
iframe.open();
iframe.write(css);
iframe.close();

9X_div-layouts

Расширение вышеупомянутого решения jQuery, чтобы 9X_div-layouts справиться с любыми задержками при загрузке 9X_html содержимого фрейма.

$('iframe').each(function(){
    function injectCSS(){
        $iframe.contents().find('head').append(
            $('', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' })
        );
    }

    var $iframe = $(this);
    $iframe.on('load', injectCSS);
    injectCSS();
});

использование может попробовать следующее:

$('iframe').load( function() {
     $('iframe').contents().find("head")
     .append($(""));
  });

9X_iframe

Если вы хотите повторно использовать CSS 9X_html и JavaScript с главной страницы, возможно, вам 9X_css-layout стоит подумать о замене

9X_iframe

Я нашел другое решение, чтобы поместить 9X_css стиль в основной html следующим образом

а 9X_html-tag затем сделайте это в iframe (см. js onload)

и 9X_span в js

Возможно, это не лучшее решение, и его, безусловно, можно 9X_div-layouts улучшить, но это еще один вариант, если 9X_div вы хотите сохранить тег стиля в родительском 9X_max-height окне

Здесь есть две вещи внутри домена

1. Раздел iFrame
2. Страница загружена в iFrame

Итак, вы 9X_iframe хотите стилизовать эти два раздела следующим 9X_span образом:

1. Стиль для раздела iFrame

Он может стилизовать с использованием 9X_css-classes CSS с уважаемым именем id или class. Вы также можете 9X_html5 просто стилизовать его в родительских таблицах 9X_div-layouts стилей.

2. Стиль страницы, загруженной в iFrame

Эти стили могут быть загружены с 9X_inline-block родительской страницы с помощью Javascript

var cssFile  = document.createElement("link") 
cssFile.rel  = "stylesheet"; 
cssFile.type = "text/css"; 
cssFile.href = "iFramePage.css"; 

затем 9X_rssfeed установите этот файл CSS в уважаемый раздел 9X_div-layouts 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);

Здесь вы можете редактировать головную 9X_css часть страницы внутри iFrame, используя 9X_css этот же способ

var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead.append(
   $("",{ 
      rel: "stylesheet", 
      href: urlPath, 
      type: "text/css" }
     ));

var link1 = document.createElement('link');
    link1.type = 'text/css';
    link1.rel = 'stylesheet';
    link1.href = "../../assets/css/normalize.css";
window.frames['richTextField'].document.body.appendChild(link1);

9X_html5

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

    var $iframe =  document.querySelector(`iframe`);
    var doc = $iframe.contentDocument;

    var style = doc.createElement("style");
    style.textContent = `*{display:none!important;}`;
    doc.head.append(style);

В некоторых случаях 9X_rssfeed вы также можете прикрепитьload событие в iframe:

var $iframe =  document.querySelector(`iframe`);

$iframe.addEventListener("load", function() {
    var doc = $iframe.contentDocument;
    var style = doc.createElement("style");
    style.textContent = `*{display:none!important;}`;
    doc.head.append(style);
});

Существует wonderful script, который заменяет узел собственной 9X_html5 версией iframe. CodePen Demo

Примеры использования:

// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);

// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
  return iframify(component, {});
});

// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
  headExtra: '',
  metaViewport: ''
});

В качестве альтернативы вы можете использовать 9X_span технологию CSS-in-JS, как показано ниже: lib:

https://github.com/cssobj/cssobj

Он 9X_max-height может динамически внедрять объект JS как 9X_css-classes CSS в iframe