Добавление класса к элементу в iframe с использованием jQuery - PullRequest
Новая
       4

Добавление класса к элементу в iframe с использованием jQuery

1 голос
/ 21 октября 2010 
<iframe src="/demo.php" id="source"></iframe>

$('#source').delegate('*', 'hover', function() {
    $(this).addClass('hover');  
});

$('#source').delegate('*', 'mouseout', function() {
    $(this).removeClass('hover');   
});

$('#source').delegate('*', 'click', function() {
    alert($(this).html());
    return false;
});

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

Есть идеи, как заставить это работать?

Ответы [ 2 ]

6 голосов
/ 22 октября 2010

ОКОНЧАТЕЛЬНОЕ РЕДАКТИРОВАНИЕ:

Есть две проблемы:

  1. Используйте $('#source').contents() вместо простого использования $('#source')

  2. Правило css для .hover не отображается в контексте iframe.
    Либо используйте .css() для прямой установки стиля, добавьте ссылки CSS в demo.php или клонируйте все стили основного документа в iframe с помощью jQuery.

Также вам следует избегать .live, так как кажется, что некоторая проблема s внутри iframes (при использовании live jQuery связывает специальные eventHandlers с документом и проверяет события, когда они всплывают)

Вот рабочий пример ( jsFiddle link ): 

var $c = $('#source').contents();

//clone all styles from this document into the iframe
$c.find('head').append($('style, link[rel=stylesheet]').clone());

$c.find('body').prepend('<b>This is a test</b><br><b>Click here</b>');

$c.delegate('b', 'hover', function() {
    $(this).toggleClass('hover');
});

$c.delegate('b', 'click', function() {
    alert('You clicked on:' + $(this).text());
});

ОРИГИНАЛЬНЫЙ ОТВЕТ:

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

Также для безопасности вы можете добавить свой код в событие onload, например: 

var doc = window.frames['source'].document;
$(doc).ready(function(){
    $('body').prepend('This is outside the iframe<br>');
    $('body',doc).prepend('This is inside the iframe<br>');
});

Вы можете просмотреть этот пример использования jsFiddle в реальном времени .

РЕДАКТИРОВАТЬ 1:

Хорошо, поэтому настоящая проблема в том, что стили css не видны в iframe.

Например, если вы используете $(this).css('color':'red') вместо addClass, это будет работать. Смотрите обновленный jsFiddle

То, что я предлагаю, это либо иметь правильные стили CSS уже в demo.php, либо вставлять потом так: 

$('head',doc).append($('style, link[rel=stylesheet]').clone());

обновлен jsFiddle - с addClass и клонированием стилей

0 голосов
/ 22 октября 2010

попробуйте с этим содержанием :

demo.php: 

<html>
<head>
...
</head>
<body>
<div id="container-div">
...
</div>
</body>
</html>

код: 

<iframe src="/demo.php" id="source"></iframe>

$('#source').contents().delegate('container-div', 'hover', function() {
    $(this).addClass('hover');  
});

$('#source').contents().delegate('container-div', 'mouseout', function() {
    $(this).removeClass('hover');   
});

$('#source').contents().delegate('container-div', 'click', function() {
    alert($(this).html());
    return false;
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...