jQuery + SVG: невозможно получить доступ к элементу SVG в iFrame

Question

Такие вопросы, как , и , , например, использование jQuery contents() позволяет получить доступ к элементу iFrame.

Однако этот код не работает.

Это не проблема перекрестного происхождения, так как родитель и iFrame размещены в домене Codepen.io.

Если вы просматриваете Codepen, вы увидите, что iFrame имеет дочерний SVG-элемент, который называетсяdesignBox.

$(document).ready(function() {

          $("#livePreview").on("load", function() {
             var designBox = $("#livePreview").contents().find("#designBox");
             var livePreviewContents = $("#livePreview").contents();

             console.log("Loaded live preview. Design box: " + designBox.length + ". Live preview contents: " + livePreviewContents);
          });

    });

Answer 1

Если вы посмотрите на инструменты разработчика, то заметите, что есть средний iFrame с идентификатором result, который добавлен Codepen.Это потому, что добавляемый вами iframe является страницей кодового загона, которая также уже содержит iframe.

Структура имеет вид:

|--- iframe#livePreview -------|
| |--- iframe#result --------| |
| | |--- svg#designBox ----| | |
| | |                      | | |
| | |______________________| | |
| |__________________________| |
|______________________________|

Так что вам нужно будет добавить еще один вызов contents()зайдите внутрь этого iframe#result и получите ваш svg.

=> $("#livePreview").contents().find("#result").contents().find("#designBox"); Но вам, вероятно, придется управлять событием load вложенного iframe (я его не проверял)

Answer 2

Возможно, вы столкнулись с той же проблемой политики происхождения.Вы не можете получить доступ к содержимому iframe с другим происхождением, используя JavaScript, это было бы огромным недостатком безопасности, если бы вы могли это сделать.Для браузеров политики того же источника блокируют сценарии, пытающиеся получить доступ к кадру с другим источником.

Я делюсь ссылкой, в которой подробно объясняется доступ к содержимому iframe и различным сценариям Следуйтеэта ссылка