Может ли HTML iframes наследовать данные css и javascript

Мне было интересно, могут ли HTML-iframes наследовать данные CSS от их родителя:

main.html

<html>
  <head>
   <style>
     .highlight{
       background: #008fcc;
      }
   </style>
  </head>
 <body>
   <iframe src='frame.html'></iframe>
 </body>
</html>

frame.html

hello <font class='highlight'>

Ответы

Ответ 1

Короткий ответ: Нет, iframe в общем не может наследовать/получать доступ к стилям/сценариям со своей родительской страницы.

Длинный ответ: Вы ничего не можете изменить в стилях или выполнить скрипты внутри iframe, если он поступает из другого домена (вы даже не можете прочитать его содержимое DOM через JavaScript).

С другой стороны, если он поступает из того же домена, что и ваша родительская страница, вы можете изменять стили элементов или выполнять скрипты, делая что-то подобное этому на родительской странице (в этом примере используется jQuery, но это может быть написанный на обычном JavaScript):

$("#iframe_id").contents().find("#some_div").css({color: "rgb(0, 162, 232)"}); //changed style of a div inside the iframe

Чтобы выполнить функцию, определенную внутри iframe:

$("#iframe_id").contents().document.functionName(functionParams);

Надеюсь, что это помогло!

Ответ 2

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

https://developer.mozilla.org/en-US/docs/HTML/Element/iframe

Но в настоящее время он не полностью реализован в любом современном браузере.

Более простое решение состоит в том, чтобы поместить весь ваш CSS в отдельный файл и включить его как на главной странице, так и на странице iframed.