Использование CSS для влияния на стиль div внутри iframe

Question

Можно ли изменить стили div, который находится внутри iframe на странице, используя только CSS?

Answer 1

Вам нужен JavaScript. Это то же самое, что и на родительской странице, за исключением того, что перед командой JavaScript необходимо указать имя iframe.

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

Я использую Prototype Framework, чтобы упростить:

frame1.$('mydiv').style.border = '1px solid #000000'

или

frame1.$('mydiv').addClassName('withborder')

Answer 2

Короче №.

Вы не можете применить CSS к HTML, который загружен в iframe, если вы не контролируете страницу, загруженную в iframe из-за междоменных ограничений ресурса.

Answer 3

Да. Посмотрите на этот другой поток для деталей: Как применить CSS к iframe?

var cssLink = document.createElement("link");
cssLink.href = "style.css";  
cssLink.rel = "stylesheet";  
cssLink.type = "text/css";  
frames['frame1'].document.body.appendChild(cssLink); 

Answer 4

Вы можете сначала извлечь содержимое iframe, а затем использовать jQuery селекторы против них, как обычно.

$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")

$("#iframe-id").contents().find("img").addClass("fancy-zoom")

$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });

Удачи!

Answer 5

Быстрый ответ: нет, извините.

Невозможно использовать только CSS. В основном вам нужно контролировать содержимое iframe, чтобы его стилизовать. Существуют методы, использующие javascript или предпочитаемый вами веб-язык (о котором я немного читал, но не знаком с самим собой) для динамической вставки некоторых необходимых стилей, но вам потребуется прямой контроль над содержимым iframe, которое звучит как у тебя нет.

Answer 6

Используйте Jquery и дождитесь загрузки источника, Вот как я добился (используется угловой интервал, вы можете использовать метод javascript setInterval):

var addCssToIframe = function() {
    if ($('#myIframe').contents().find("head") != undefined) {
        $('#myIframe')
                .contents()
                .find("head")
                .append(
                        '<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
        $interval.cancel(addCssInterval);
    }
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);

Answer 7

Видимо, это можно сделать через jQuery:

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
});

https://stackoverflow.com/a/13959836/1625795

Answer 8

вероятно, не так, как вы думаете. iframe должен был бы также <link> в файле css. И вы не можете сделать это даже с JavaScript, если он находится в другом домене.

Answer 9

Какой-то хакерский способ ведения дел, как сказал Юджин. Я закончил тем, что следовал его коду и связывался с моим собственным Css для страницы. Проблема для меня заключалась в том, что, используя временную шкалу твиттера, вы должны обходить щебет, чтобы переопределить их код smidgen. Теперь у нас есть скользящая временная шкала с нашим CSS, I.E. Увеличенный шрифт, правильная высота строки и скрытие полосы прокрутки для высот, превышающих их пределы.

var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary

Answer 10

Невозможно со стороны клиента. Будет выдано сообщение об ошибке «Ошибка: в доступе к свойству« документ »отказано в доступе», поскольку Iframe не является частью вашего домена. Единственное решение - извлечь страницу из кода на стороне сервера и изменить необходимый CSS.