2012-06-30 6 views
4

Я пишу сценарий GreaseMonkey, который изменяет атрибут элемента с определенным идентификатором, но у меня возникают некоторые проблемы с его доступом из-за нетрадиционной HTML-иерархии. Вот соответствующий HTML:Доступ к элементам внутри iframe и тела Теги с JavaScript

<body> 
... 
    <iframe id="iframeID"> 
     <html> 
     ... 
      <body id="bodyID" attribute="value"> 
      ... 
      </body> 
     ... 
     </html> 
    </iframe> 
... 
</body> 

attribute Где это атрибут, который я пытаюсь изменить.

В первом, не понимая, что я работал с iframe и вложенным body тегом, я попытался это:

document.getElementById('bodyID').setAttribute("attribute","value") 

В то время как это работает отлично в Firefox, Chrome говорит мне, что я не могу установить атрибут null, что указывает на то, что он не может найти никаких элементов с идентификатором bodyID. Как изменить этот атрибут в дружественном браузере?

+0

Вы пробовали 'window.frames'? (doc: https://developer.mozilla.org/en/DOM/window.frames) –

+0

@drderp Хотя я думаю, что это сработает, код будет содержать ненужный беспорядок по сравнению с решением gdoron. – Sonic42

+2

gdoron опубликовал свое решение сразу после моего размещения; Я согласен с вами в этом. –

ответ

8

Сначала необходимо вытянуть документ из :

document.getElementById('iframeID').contentDocument 
.getElementById('bodyID').setAttribute("attribute","value"); 

Live DEMO

Кстати, если вы хотите получить <body> узел, вам не нужно давать идентификатор или что-то подобное просто:

document.body 

В вашем случае, это документ :

document.getElementById('iframeID').contentDocument.body.setAttribute("attribute","value"); 

Много проще ... Разве не так?

+0

Отлично, спасибо за помощь! – Sonic42

1

Лучший способ, ИМО, сделать это, чтобы прослушать событие load, выпущенное iFrame, а затем заглянуть в iFrame DOM по мере необходимости. Это гарантирует, что у вас будет доступ к iFrame DOM, когда вам это нужно, и сделайте снимок.

$('#iframeID').on('load', function() 
{ 
    alert('loaded'); // iFrame successfully loaded 
    var iFrameDoc = $('#iframeID')[0].contentDocument; // Get the iFrame document 
    $('body', iFrameDoc).attr('attribute', 'new value'); // Get the 'body' in the iFrame document and set 'attribute' to 'new value' 
}); 
+1

Где находится тег 'jQuery'? и прочитайте мой комментарий относительно '' – gdoron

+0

@gdoron, добавьте jQuery в свой . Это не будет работать, если iFrame и iFrame-контейнер имеют другой домен из-за междоменной политики. – Gezim

+0

Не знаете, что вы хотели сказать о jQuery. и ваш ответ имеет ту же проблему с междоменной политикой. – gdoron

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