Блог

Главная - Вопросы по программированию - Как встроить одну страницу в другую, сохраняя ее адаптивной?

Как встроить одну страницу в другую, сохраняя ее адаптивной?

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть page-container.html и я хотел бы встроить page-embeddable.html в нее. Сама по себе page-embeddable.html является адаптивной (ее высота изменяется в зависимости от ширины содержащего элемента), и я хочу сохранить эту характеристику при ее внедрении.

Я использую следующие методы без особого успеха:

  1. iframe тег. Она просто не реагирует. Это работает, только если высота page-embeddable.html фиксирована. Но это не так — она перестраивается сама, а высота динамична.
  2. object тег. Я попытался установить <object type="text/html" data="page-embeddable.html"></object> значение innerHtml элемента, но он действует в значительной степени как iframe. Не реагирует.
  3. Разрезать page-embeddable.html на части. Загружайте любые .js и .css, на которые ссылается страница, с помощью JavaScript. Затем загрузите внутреннюю часть тега body в .innerHTML некоторого div на page-container.html . Это работает и является адаптивным, а высота является динамической, но page-embeddable.html динамически генерируется и может иметь разные ссылки js / css в зависимости от контекста. Поэтому мне пришлось бы выяснить, что находится в файле, прежде чем загружать его.

Есть ли лучший способ встроить страницу, которую я просматриваю? Для контекста я пытаюсь создать встроенный виджет, что-то вроде Codepen, за исключением того, что высота должна быть динамической.

Комментарии:

1. вместо того, чтобы пытаться сделать это во внешнем интерфейсе, сгенерируйте всю страницу во внутреннем интерфейсе, используя шаблонное решение? Таким образом, клиент просто получает «обычный html-документ» вместо чего-то, что пытается включить весь второй документ.

2. @Mike’Pomax’Camermans Клиент должен иметь возможность встроить виджет на любую страницу. Клиент — это клиент, который покупает доступ к моему виджету. Поэтому я не могу предоставить ему полную страницу. Я в основном предоставляю клиенту foo.js с моего сайта и с помощью метода .load(elementIdToRenderTheWidgetOn).

3. Вы хотите изучить возможность встраивания веб-компонента , ресурсы и стили которого не будут конфликтовать с родительской страницей

4. Поддержка @charlietfl кажется отрывочной. caniuse.com/#search=components

5. Не работал с ними много, но я считаю, что есть несколько резервных подходов. Просто выкидывал ее туда