Элемент HTML-объекта и проблема с прокруткой

Я использую следующий HTML-код для вставки HTML-кода из внешнего URL-адреса на мой сайт, и он отлично работает:

<object data="https://myapp.com/explore" width="100%" height="100%" type="text/html" style="overflow: hidden;">
    <embed src="https://myapp.com/explore" width="100%" height="100%;" /> 
    Error: Embedded data could not be displayed.
</object>

На странице отображается вертикальная полоса прокрутки, которая является правильным поведением, которое я ожидаю, поскольку содержимое больше, чем высота окна браузера Chrome.

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

Кто-нибудь видел это, и можете ли вы предложить, как его решить? Это странное поведение, которого я раньше не видел...

Ответы

Ответ 1

Я пробовал ваш подход к объекту + встраивания и столкнулся с той же проблемой с полосой прокрутки. Браузер Chrome, похоже, не запускает mousedown на полосе прокрутки, но запускает mouseup, который выглядит как ошибка. Почему бы не попробовать iframe? Он работает так, как вы ожидаете, я думаю:

<iframe id="exploreIFrame" src="http://myapp.com/explore"
  width="100%" height="100%" style="border: none;"
></iframe>

Чтобы охватить все окно, установите следующие стили:

<style type="text/css">
  body { margin: 0; }
  #exploreIFrame { position: fixed; }
</style>

Ответ 2

Попробуйте использовать свойство max-height в пикселях и используйте свойство overflow для прокрутки...

 object_classname{
     max-height: 600px; //as you like
     overflow-y: scroll;
 }

Ответ 3

Лучше использовать iframe вместо встраивания.

IFrame:

Элемент iframe представляет собой вложенный контекст просмотра. Стандарт HTML 5 описывает "Элемент", как правило, используемый для включения ресурсов из других доменов или поддоменов, но может использоваться для включения контента из того же домена. Сила iframe заключается в том, что встроенный код является "живым" и может связываться с родительским документом.

embed:

Стандартизован в HTML 5, но до этого он был нестандартным тегом, который, по общему признанию, был реализован всеми основными браузерами. Поведение до HTML 5 может меняться...

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

Сведения о том, что может и не может быть сделано со встроенным контентом, зависит от рассматриваемого плагина браузера. Но для SVG вы можете получить доступ к встроенному документу SVG от родителя с чем-то вроде:

svg = document.getElementById("parent_id").getSVGDocument();

Из встроенного документа SVG или HTML вы можете связаться с родителем с помощью

parent = window.parent.document;

Для встроенного HTML нет способа получить во встроенном документе родителя (который я нашел).

Ответ 4

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