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





5 Answers

Короче нет.

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

css iframe

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




Сначала вы можете получить содержимое 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)); });

Удачи!




Используйте 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);



По-видимому, это можно сделать через jQuery:

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

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




Какой-то хакерский способ делать вещи, как сказал Юджин. Я закончил следовать его коду и привязал к своему пользовательскому Css для страницы. Проблема для меня заключалась в том, что, с временной шкалой твиттера, вам нужно немного обойти twitter, чтобы переопределить их код smidgen. Теперь у нас есть скользящая временная шкала с нашим css к ней, IE Larger font, правильная высота линии и создание скрытой полосы прокрутки для высот, превышающих их пределы.

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



Related


Tags

css   iframe