Встраивание динамически изменяемой веб-страницы с использованием JavaScript

Question

Итак, сначала некоторая справочная информация: я пытаюсь встроить веб-страницу в другую страницу. Подстраница в основном представляет собой небольшое веб-приложение, написанное на javascript и html, которое принимает несколько экранов ввода (переключатели, текстовые поля и т. Д.) И дает экран с результатами в конце. Каждый из этих экранов может быть разного размера.

Есть два метода, которые я пытался использовать для встраивания:

1) Скопируйте все html и javascript с подстраницы на главную страницу и вставьте их в div/table/what.

2) Сохраните подстраницу в своем собственном файле и вставьте ее, используя embed / object / iframe.

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

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

Самое близкое решение, которое мне удалось найти, - это использование обработчика document.onclick для перехвата любого нажатия, которое может вызвать появление следующего экрана на дополнительной странице. Обработчик делает паузу на очень короткое время (чтобы открыть следующий экран) и затем вызывает необходимую функцию изменения размера. Однако это похоже на очень хакерское решение, и есть также немного заметная задержка, когда полоса прокрутки появляется на боковой стороне кадра, когда она еще не развернута, чтобы соответствовать новому контенту. Я думаю, что должен быть лучший способ сделать это.

Answer 1

Если файл находится на том же сервере / домене, вы можете просто загрузить его с помощью jQuery. Вот некоторый код jQuery:

<script type="text/javascript">
$(document).ready(function() {
$('#id-of-div').load('/path/to/page.html');
});
</script>

Просто поменяй id-of-div к id div, в который вы хотите, чтобы страница была загружена и изменена /path/to/page.html на фактический URL-адрес страницы. (вам не нужен домен этого, просто путь к нему)

Надеюсь, это поможет.

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