Ссылка на зеркальные элементы в IFrame - PullRequest
Новая
       1

Ссылка на зеркальные элементы в IFrame

0 голосов
/ 01 марта 2011

Всем привет,
У меня проблема с JavaScript, которая меня озадачивала уже несколько часов. Так как я не могу придумать что-нибудь полезное, я хотел бы попросить вашего участия. Вот цель:

  1. JS выполняется при загрузке страницы, которая клонирует структуру документа (я не верю, что вы можете просто украсть дочерние узлы элемента документа, поэтому мне, возможно, придется просто перебрать все объекты и скопировать все их свойства) в скрытый IFrame, который он размещает вне страницы.
  2. Как только клонирование завершено, прослушиватели событий присоединяются к большинству элементов (исключая IFrame и другие скрытые элементы, такие как теги сценария), которые ожидают нажатия клавиши и других действий. Эти действия преобразуются в изменения в исходном документе, то есть в изменения свойств элементов, для которых действовали.
  3. Когда происходят эти изменения, их необходимо зеркально отразить в соответствующем элементе в IFrame (если в документе выполняется изменение элемента # abc, элемент # abc в IFrame также должен быть обновлен). Проблема здесь в том, что нет гарантии, что существует уникальный способ ссылки на зеркальные элементы в IFrame, если не назначить всем элементам числовой пошаговый идентификатор, которого я хотел бы избежать, если это вообще возможно.

Демо-версия:

Документ 

<html>
<body>
    <iframe></iframe>
    <div>a</div>
    <div>b</div>
    <div>a</div>
</body>
</html>

IFrame 

<html>
<body>
    <div>a</div>
    <div>b</div>
    <div>a</div>
</body>
</html>

Если «a» в первом div фактического документа было изменено на «c» (скажем, посредством element.innerHTML), это изменение должно быть отражено в соответствующем div (первом) в IFrame.

Можете ли вы, ребята и девочки, придумать, как сделать это возможным?

Спасибо и ура,
PhpMyCoder

Я прошу прощения, если это немного расплывчато. Я пытаюсь не быть слишком конкретным, чтобы другие могли получить пользу от любых ответов. Если вы хотите более краткое объяснение, я могу отредактировать его в. Кроме того, извините за не предоставление кода здесь. Это скорее теоретический вопрос, так что вы не думали, что нужен конкретный код. Опять же, если вам это нужно, я могу добавить его к этому вопросу.

1 Ответ

1 голос
/ 01 марта 2011

Ваш инкрементный ключ не нужно присваивать идентификатору клонированного элемента, это может быть любой произвольный атрибут (я заметил, что это делает jQuery, хотя я не уверен, что это вызывает).Тем не менее, я не уверен, что было бы лучшим способом затем снова найти клонированный элемент, если не считать итерацию каждого элемента (или использование библиотеки, такой как jQuery, что в данном случае может показаться плохим).

Другой вариант - сохранить клонированный элемент в оригинале при создании клона.Поскольку DOM-узлы - это просто объекты Javascript, вы можете добавить любое свойство, которое вам нравится.Таким образом, вы могли бы сделать: 

var clone = node.cloneNode(true);
node.clonedNode = clone;
// Add clone to iframe document

(не уверен, что cloneNode будет работать для всего документа, также похоже, что вам может понадобиться importNode вместо того, чтобы добавить егов другой документ)

Затем в обработчике событий: 

var clone = event.target.clonedNode;

Было бы интересно узнать, работает ли это надежно во всех браузерах!

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...