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

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

Ответ 1

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

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

Я использую Prototype для облегчения:

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

или

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

Ответ 2

Короче нет.

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

Ответ 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);

Ответ 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)); });

Удачи!

Ответ 5

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

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

Ответ 6

Используйте JQuery и дождитесь загрузки источника, Вот как я достиг (интервал angular, вы можете использовать метод 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);

Ответ 7

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

Ответ 8

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

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

fooobar.com/questions/35969/...

Ответ 9

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

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

Ответ 10

Да, это возможно, хотя и громоздко. Вам нужно будет напечатать/отозвать HTML-страницу страницы в теле вашей страницы, а затем применить функцию изменения правила CSS. Используя те же примеры, приведенные выше, вы, по существу, будете использовать метод синтаксического анализа для нахождения div на странице, а затем применить к нему CSS и затем перепечатать/отозвать его конечному пользователю. Мне это не нужно, поэтому я не хочу кодировать эту функцию в каждый элемент в CSS другой веб-страницы просто для apttply.

Литература:

Ответ 11

Просто добавьте это, и все работает хорошо:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Ответ 12

Объединяя различные решения, это то, что мне помогло.

$(document).ready(function () {
    $('iframe').on('load', function() {
        $("iframe").contents().find("#back-link").css("display", "none");
    }); 
});

Ответ 13

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