Сортировка iframe без перезагрузки в Angular [duplicate]

Question

Сортировка iframe без перезагрузки в Angular [duplicate]

Эта «ошибка» дала мне много часов работы сверхурочных! Но я начинаю видеть его потенциальное использование (но мне хотелось бы, чтобы это было во время выполнения, все еще)

Я дам вам то, что я вижу в качестве полезного примера.

def example(errors=[]):
    # statements
    # Something went wrong
    mistake = True
    if mistake:
        tryToFixIt(errors)
        # Didn't work.. let's try again
        tryToFixItAnotherway(errors)
        # This time it worked
    return errors

def tryToFixIt(err):
    err.append('Attempt to fix it')

def tryToFixItAnotherway(err):
    err.append('Attempt to fix it by another way')

def main():
    for item in range(2):
        errors = example()
    print '\n'.join(errors)

main()

печатает следующие

Attempt to fix it
Attempt to fix it by another way
Attempt to fix it
Attempt to fix it by another way

74

javascript html angular sorting iframe

задан JCOC611 29 November 2011 в 23:53

8 ответов

Всякий раз, когда iframe добавляется и применяется атрибут src, он запускает действие загрузки аналогично созданию тега изображения через JS. Поэтому, когда вы удаляете и добавляете их, они являются совершенно новыми объектами, и они обновляются. Его вид того, как window.location = window.location перезагрузит страницу.

Единственный способ, которым я знаю переставить iframes, - через CSS. Вот пример, который я собрал, показывая один способ справиться с этим с помощью flex-box: https://jsfiddle.net/3g73sz3k/15/

Основная идея - создать a flex-box, а затем определить определенный порядок для iframes, используя атрибут order на каждой оболочке iframe.

<style>
  .container{
    display: flex;
    flex-direction: column;
  }
</style>
<div class="container">
  <div id="wrap1" style="order: 0" class="iframe-wrapper">
    <iframe id="iframe1" src="https://google.com"></iframe>
  </div>
  <div id="warp2" style="order: 1" class="iframe-wrapper">
    <iframe id="iframe2" src="https://bing.com"></iframe>
  </div>
</div>

Как вы можете видеть в скрипте JS, эти стили order являются встроенными, чтобы упростить flip, поэтому поверните iframes.

Я получил решение из этого вопроса StackOverflow: Поменять место DIV с помощью CSS только

Надеюсь, что помогает.

10

ответ дан Community 21 August 2018 в 19:05

1

Bounty для 1-го абзаца и объясняет, что он похож на img и создает новый объект. не css: P – djechlin 13 October 2016 в 19:18

Этот ответ связан с щедростью by @djechlin

. Многие поиски по спецификациям w3 / dom и не нашли ничего окончательного, что конкретно говорит о том, что iframe должен перезагружаться при перемещении в дереве DOM, однако в течение нескольких лет я нашел множество ссылок и комментариев в trac / bugzilla / microsoft webkit относительно различных изменений поведения.

Надеюсь, что кто-то найдет что-то конкретное в отношении этого вопрос, но на данный момент вот мои выводы:

Согласно Ryosuke Niwa - «Это ожидаемое поведение».

magic iframe "( webkit, 2010 ), но он был удален в 2012 году .

Согласно MS -« ресурсы iframe освобождаются, когда удалены из DOM ". Когда вы appendChild(node) существующего узла, - node сначала удаляется из dom. Интересная вещь здесь - IE<=8 не перезагружает iframe - это поведение (несколько) новое (поскольку IE>=9).

Согласно комментарию Hallvord RM Steen , это - это цитата из спецификаций ifgram . Когда элемент iframe вставлен в документ, в котором есть контекст просмотра, пользовательский агент должен создать новый контекст просмотра, установить контекстный контекст просмотра элемента в недавно созданный контекст просмотра, а затем обрабатывать атрибуты iframe для «первого раза». Это самая близкая вещь, которую я нашел в спецификациях, однако она по-прежнему требует некоторой интерпретации (поскольку, когда мы перемещаем элемент iframe в DOM, мы действительно не делаем полного remove, даже если браузеры используют node.removeChild).

25

ответ дан Dekel 21 August 2018 в 19:05

1

Поблагодарите ответ от спутника с объяснением. – Dekel 9 October 2016 в 20:16

1

ответ дан denodster 21 August 2018 в 19:05

Если вы используете iframe для доступа к страницам, которые вы управляете, вы можете создать некоторый javascript, чтобы позволить вашему родителю общаться с iframe через postMessage

. Там вы можете создать логин внутри iframe для записи изменения состояния и перед перемещением dom, запросите это как объект json.

После перемещения iframe перезагрузится, вы можете передать данные состояния в iframe, и прослушивание iframe может анализировать данные обратно в предыдущее состояние.

0

ответ дан Drew Major 21 August 2018 в 19:05

1

Конечно, это много кода, предполагается, что вы контролируете все данные, которые будут отображаться в кадре, и по-прежнему технически не поддерживают «состояние при перемещении в DOM». – Drew Major 12 October 2016 в 16:07

К сожалению, свойство parentNode элемента HTML DOM доступно только для чтения. Конечно, вы можете отрегулировать позиции фреймов, но вы не можете изменить их местоположение в DOM и сохранить их состояния.

См. Этот jsfiddle, который я создал, который обеспечивает хорошую тестовую кровать. http://jsfiddle.net/RpHTj/1/

Нажмите на поле, чтобы переключить значение. Нажмите «move», чтобы запустить javascript.

4

ответ дан Matt H 21 August 2018 в 19:05

Если вы создали iFrame на странице и просто хотите переместить его позицию, попробуйте этот подход:

Добавить iFrame в тело и использовать высокий индекс z и верхний, левый, ширина , высота для размещения iFrame, где вы хотите.

Даже CSS-масштабирование работает на теле без перезагрузки, что является удивительным!

Я поддерживаю два состояния для своего «виджета», и это либо

Это полезно, когда другой контент или библиотеки будут хлюпать или раздавить ваш iFrame.

BOOM!

5

ответ дан mattdlockyer 21 August 2018 в 19:05

Этот вопрос довольно старый ... но я нашел способ переместить iframe без его перезагрузки. Только CSS. У меня есть несколько iframe с потоками камеры, мне не нравится, когда они перезагружаются, когда меняют их. Поэтому я использовал комбинацию float, position: absolute и некоторых фиктивных блоков для их перемещения без перезагрузки и с желаемым расположением по требованию (изменение размера и все).

4

ответ дан moeiscool 21 August 2018 в 19:05

1

Звучит как единственный жизнеспособный вариант. Вы должны отправить полное решение, которое вы придумали! По крайней мере, некоторый базовый код для запуска других. Благодаря! – JCOC611 19 June 2016 в 15:21

Другие вопросы по тегам:

javascript html angular sorting iframe

Похожие вопросы:

Bounty для 1-го абзаца и объясняет, что он похож на img и создает новый объект. не css: P — djechlin, 13 October 2016 в 19:18
Поблагодарите ответ от спутника с объяснением. — Dekel, 9 October 2016 в 20:16
Конечно, это много кода, предполагается, что вы контролируете все данные, которые будут отображаться в кадре, и по-прежнему технически не поддерживают «состояние при перемещении в DOM». — Drew Major, 12 October 2016 в 16:07
Звучит как единственный жизнеспособный вариант. Вы должны отправить полное решение, которое вы придумали! По крайней мере, некоторый базовый код для запуска других. Благодаря! — JCOC611, 19 June 2016 в 15:21

score 37 · Accepted Answer

Невозможно переместить iframe из одного места в дом в другое без его перезагрузки.

Вот пример, показывающий, что даже с использованием собственного JavaScript iFrames все еще перезагружают: http://jsfiddle.net/pZ23B/

var wrap1 = document.getElementById('wrap1');
var wrap2 = document.getElementById('wrap2');
setTimeout(function(){
    document.getElementsByTagName('body')[0].appendChild(wrap1);
},10000);

37

ответ дан DelightedD0D 21 August 2018 в 19:05

1

Ну, если iFrames перезагрузится, это не вариант. – JCOC611 30 November 2011 в 00:10
2

Правильно, цель примера - показать, что даже с использованием собственного JavaScript iFrames все еще перезагружается. – Kevin B 30 November 2011 в 00:11
3

Ну, на самом деле, мне действительно все равно, перезагружается или нет, так как их местоположения about:blank, но меня волнует потерять содержимое внутри фрейма. – JCOC611 30 November 2011 в 00:15
4

если он перезагружается, что приведет к потере содержимого внутри iframe. Я думаю, вы могли бы захватить содержимое внутри iframe, прежде чем перемещать его с помощью jquery $("#iframeid").contents(), однако это не приведет к сохранению данных javascript, оно должно быть отправлено на родительскую страницу iframe. (Или родительская страница должна была бы возьмите его из iframe) – Kevin B 30 November 2011 в 00:17
5

DelightedD0D, щедрость была открыта @djechlin - «Интересно, так ли это в 2016 году»? чтобы узнать, не изменилось ли за последние 5 лет изменение этой проблемы. Вы можете проверить резюме в своем ответе относительно изменений за эти годы. – Dekel 9 October 2016 в 12:24