2013-06-26 7 views
2

Мне нужно что-то подстроить в iframe.содержание стиля в iframe

<html> 
<head> 
    <link href="url/to/my/custom.css"></link> 
</head> 
<body> 
    ...... 
    <iframe class="webform-frame">...</iframe> 
</body> 
</html> 

В моей custom.css я уже пытался использовать .webform-frame h5 { color: #f00; }, но он не работает.

iframe генерируется некоторым JavaScript (у меня нет доступа к нему).

Любая идея, как я мог бы стилизовать этот материал в этом iframe?

+1

документ внутри 'iframe' является отдельным документом; вам нужно добавить свою таблицу стилей. Либо в HTML, либо динамически используя JavaScript (но для этого документ iframe должен находиться в одном домене.) –

+0

нет его в другом домене – Safari

+0

Обычно, что делают компании (я уверен, что вы его увидите) заключает iFrame в ваш собственный документ обертки. Компании делают это, когда они требуют от вас платежа. В вашем документе есть логотип и стиль своей компании, а форма оплаты в отдельном iFrame. Нет, вы не можете стилизовать материал в этом iFrame, но вы можете создать свой собственный код вокруг него. Возможно, подумайте больше об этом стандартном решении, используемом многими корпоративными компаниями. – Jimbo

ответ

8

Если вы хотите целевой iframe то есть границы, цвет границы, обивка, или края, то с помощью этого будет нацеливать свои iframe:

iframe.webform-frame { 
    /* Styles */ 
} 

Если вы пытаетесь предназначаться разметку, которая загружается в iframe, чем это невозможно.

Примечание: Вы можете контролировать несколько вещей, как сделать фон прозрачным кадр и т.д. ...


Edit: Хотел бы добавить seamless атрибут объяснения здесь, как сказал Себастьян, но поддержка оставляет желать лучшего. Возможно, вы проигнорируете это. Также не изменяйте любых iframed-страниц без предварительного разрешения владельца страницы.

+0

Мое решение отлично подходит для некоторых специальных целей (например, расширение расширения Chrome), и я думаю, что его нельзя игнорировать, если это позволяет использовать его. –

+0

для работы с CORS вы можете добавить тег

6

Существует новый HTML 5 функция называется seamless IFrame, который, возможно, делает то, что вы хотите:

[...] это означает, что контекст просмотра в IFrame элемента должен быть воспроизведен таким образом, что делает его по-видимому, быть частью содержащего документ [...]

<iframe src="iframe.html" seamless></iframe> 

Однако сейчас она имеет очень слабую поддержку браузера (Webkit только я думаю). Поэтому сегодня это не очень хорошее решение для большинства случаев использования. Но, возможно, это для вас или для некоторых читателей будущего.

Обновление: поддержка браузера, похоже, even worse today, так что это не решение сегодня или в ближайшем будущем.

-1

Использование JQuery вы можете получить доступ к содержимому внутри фрейма , используя следующий синтаксис:

$('iframe.webform-frame').contents().find('h5').css("color","#f00"); 
+3

Это работает, только если iframe находится в том же домене, что и главная страница –

Смежные вопросы