Блог

Главная - Вопросы по программированию - Могу ли я применить CSS к элементам внутри iframe?

Могу ли я применить CSS к элементам внутри iframe?

#javascript #html #css #dom #iframe

#javascript #HTML #css #dom #iframe

Вопрос:

Я часто вижу сайты, использующие iframes, содержащие внешний сайт, и верхний фрейм, содержащий функциональность JavaScript для пользователя.

например, программное обеспечение для анализа пользователей, Digg bar и т.д…

Есть какие-нибудь советы по экспериментированию с чем-то подобным? =) Было бы здорово узнать

Ответ №1:

Нет, не извне iframe. <iframe> — это его собственный мир. Если домены и т.д. совпадают, то Javascript может взаимодействовать внутри и снаружи и может (если захочет) внедрить CSS в дочерний фрейм.

Если <iframe> содержит контент из другого домена, вы практически ничего не можете сделать. Родительская страница управляет размером фрейма и тем, виден ли он, и может помещать свое собственное содержимое поверх фрейма путем позиционирования и т.д., Но это не может напрямую влиять на способ отображения фактического содержимого фрейма.

Комментарии:

1. большое спасибо! Что, если домен точно такой же, как и главная страница?

2. Если вы находитесь в том же домене, то Javascript с родительской страницы может испортить содержимое фрейма. CSS родительской страницы не повлияет на страницу фрейма, но Javascript может изменять CSS или стили элементов и т.д.

3.есть ли какой-нибудь способ сделать это, используя некоторые методы, о которых говорят люди.. внедрение дочернего iframe или postMessage или чего-то еще? pipwerks.com/2008/11/30 /… johan.driessen.se/posts/resizing-cross-domain-iframes

Ответ №2:

Если это тот же домен, вы можете вмешаться в содержимое iframe с помощью javascript следующим образом .. предположим, что идентификатор iframe IframeId . И вы хотите изменить цвет элемента, имеющего идентификатор «elementId».

 $("iframe").load(function() {
   var frameContents;
   frameContents = $("#IframeId").contents(); 
   frameContents.find("#elementId").css("color","#fff");
});

Ответ №3:

Этого можно добиться, введя CSS-ссылку в заголовок iframe:

     // this function will inject the link to CSS into iframe header
    function loadCSSToiFrame(iframeId, filename){ 
       var file = document.createElement("link");
       file.setAttribute("rel", "stylesheet");
       file.setAttribute("type", "text/css");
       file.setAttribute("href", filename);
       document.getElementById(iframeId).contentWindow.document.head.appendChild(file);
    }
  
    // just call a function to load your CSS
    // this path should be relative your HTML location
    loadCSS("iframe_id", "stylesheet.css");