Есть ли способ заменить документ iframe другим без копирования? - PullRequest
Новая
       22

Есть ли способ заменить документ iframe другим без копирования?

0 голосов
/ 29 апреля 2020

У меня есть iframe ifr и документ doc. Я хочу установить содержимое / документ iframe, используя загруженный документ.

Теперь у меня есть: 

ifr.contentDocument.open();
ifr.contentDocument.write(doc.documentElement.innerHTML);
ifr.contentDocument.close();

Что это означает, что копирует содержимое документа в HTML в документ iframe.

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

Возможно ли это каким-либо образом в JavaScript?

Ответы [ 2 ]

0 голосов
/ 29 апреля 2020

Следующая техника работает и со страницами в одном домене. Редактирование веб-страницы без клонирования может быть сделано путем перемещения страницы. Дайте мне знать, если это вас интересует, и я обновлю этот ответ соответственно.

  1. Добавить атрибут [name] к <iframe>. 

    <iframe name=''...></iframe>

  2. Назначить произвольное значение для [name] из <iframe>. 

    <iframe name='portal'...></iframe>

  3. Добавить фиксатор <a>. 

    <a href=''...></a>

  4. Присвойте URL-адрес [href] из <a>. 

    <a href='//example.com'...>Example</a>

  5. Добавьте [target] к <a>. 

    <a href='//example.com' target=''...>Example</a>

  6. Присвойте [name] значение <iframe> [target] из <a>. 

    <a href='//example.com' target='portal'...>Example</a>

Демо

Примечание: ТАК блокирует YouTube, поэтому просмотрите этот Fiddle для полнофункциональной демонстрации 

:root,
body {
  font: 700 small-caps 3vw/1.5 Verdana, sans-serif;
}

main {
  width: 95%;
  margin: 0 auto;
}

iframe {
  display: block;
  margin: 0 auto;
}

nav {
  width: 99%;
  margin: 0 auto;
  border: 1px solid #000;
}

ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  list-style: none;
  margin: 0 auto;
}

li {
  width: 33%;
  text-align: center;
}
<main>
  <nav>
    <ul>
      <li>
        <a href='//example.com' target='portal'>Example</a>
      </li>
      <li>
        <a href='//player.vimeo.com/video/411293670' target='portal'>Vimeo</a>
      </li>
      <li>
        <a href='//www.youtube.com/embed/4r7wHMg5Yjg' target='portal'>YouTube</a>
      </li>
    </ul>
  </nav>
  <iframe name='portal' src='about:blank' width="560" height="315" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</main>
0 голосов
/ 29 апреля 2020

Вы можете попытаться сохранить код HTML в хранилище браузера и автоматически синхронизировать его между windows и кадрами

.
...