2013-10-04 1 views
3

Вот фрагмент кода, который использует сценарий для заполнения содержимого фрейма:Рабочих из IFRAME

<!doctype html> 
<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
     <script> 
     $(document).ready(function() { 
      $('iframe').contents().find('body').html('<script>console.log($("div"))<\/script>'); 
     }); 
     </script> 
    </head> 
    <body> 
     <div>Test</div> 
     <iframe /> 
    </body> 
</html> 

При выполнении мы видим, что IFrame имеет доступ к родительскому DOM, и мы видим DIV выбирается селектором jQuery. В iframe не включен jQuery, но он может получить доступ к объекту jQuery родителя.

Однако, если мы пишем то же самое с помощью включения Src Iframe, поведение отличается:

test.html:

<!doctype html> 
<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    </head> 
    <body> 
     <div>Test</div> 
     <iframe src="another.html"> 
    </body> 
</html> 

another.html:

<!doctype html> 
<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
     <script> 
     $(document).ready(function() { 
      console.log($('div')); 
     }); 
     </script> 
    </head> 
    <body> 

    </body> 
</html> 

теперь см., что на странице не отображаются никакие div. Кроме того, если мы не включим jQuery js на дочерней странице, это приведет к ошибке.

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

Мои вопросы:

  1. Почему поведение отличается для 2 - а. манипулирование iframe DOM от родителя и b. включая содержимое iframe через src?
  2. Есть ли способ заставить родителя иметь доступ к ребенку, а НЕ наоборот?
+0

Можете ли вы прояснить свой тестовый пример. Что вы испытываете? Испытательные случаи не кажутся равными. – Halcyon

+0

Позвольте мне пояснить - в одном я сгенерировал HTML внутри iframe программно через jQuery, а в другом я делаю это, включив src, который содержит код. Я сделаю это похожим, если вы захотите, но если я сделаю второй, это вызовет ошибку. Если вы видите вывод 2, первый возвращает div родительской страницы, а второй - нет. – buzypi

ответ

1

Итак, первый бит кода дает 1, а второй бит кода дает 0?

Это кажется правильным.

В первом примере $ связан с родительским фреймом. Во втором примере, поскольку у вас есть новый экземпляр jQuery, он привязан к iframe.


В: html функция

$(document).ready(function() { 
    $('iframe').contents().find('body').html('<script>console.log($("div"))<\/script>'); 
}); 

JQuery будет делать eval на скрипт-части вставленного HTML. Это eval будет выполняться в рамках родителя, поэтому он использует родительский экземпляр $.

Если вы просто перенесли сценарий в iframe, он не будет работать, потому что у него нет доступа к $.

+0

Хотя это может показаться причиной, я не уверен в этом. Причина в том, что если я удалю строку: ' из other.html не ожидал бы, что он будет использовать объект jQuery родителя? Вы увидите, что этого не происходит. – buzypi

+0

Нет, конечно, не потому, что' '' не определено в iframe. Но поскольку вы используете 'html' jQuery, на части скрипта есть' eval', который дает вам доступ к родительскому '$'. – Halcyon

+1

Хорошо, что кажется разумным! Не могли бы вы сказать мне, есть ли способ вставлять HTML в iframe без родительского объекта, оценивая его, но ребенок оценивает его? – buzypi

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