HTML Object元素和滚动条问题

HTML Object element and scrollbar issue

本文关键字：滚动条 问题 元素 Object HTML      更新时间：2023-09-26

我使用以下HTML从外部URL嵌入HTML到我的网站，它工作得很好:

<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浏览器窗口的高度。

然而，当我第一次点击垂直滚动条时，页面滚动…之后，不需要点击，只要鼠标在垂直滚动条上，页面就会滚动，而不需要我点击滚动。

有没有人看到这个，你能建议如何解决吗?这是我以前从未见过的奇怪行为……

我已经尝试了您的对象+嵌入方法，并遇到了与滚动条相同的问题。Chrome浏览器似乎没有触发滚动条上的mousedown，但确实触发了mouseup，这看起来像一个bug。为什么不试试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>

最好使用iframe而不是embed。

iframe:

iframe元素表示一个嵌套的浏览上下文。HTML 5标准将"元素"描述为主要用于包含来自其他域或子域的资源，但也可以用于包含来自同一域的内容。iframe的优势在于其嵌入的代码是"活的"，可以与父文档通信。

嵌入:

在HTML 5中标准化，但在此之前，它是一个非标准标签，无可否认，所有主流浏览器都实现了这一点。HTML 5之前的行为可能会有所不同…

embed元素为外部(通常是非html)应用程序或交互式内容提供集成点。HTML 5标准将"元素"描述为用于嵌入浏览器插件的内容。SVG和HTML是例外，它们的处理方式根据标准不同。

关于嵌入内容可以做什么和不可以做什么的细节取决于所讨论的浏览器插件。但是对于SVG，您可以使用以下命令从父元素访问嵌入的SVG文档:

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

在嵌入的SVG或HTML文档中，您可以使用:

parent = window.parent.document;

对于嵌入的HTML，没有办法从父(我已经发现)获得嵌入的文档。

尝试使用max-height属性在像素，并使用overflow属性滚动…

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

可能与硬件相关。如果你在鼠标上有一个按钮/滚轮，当你选择滚动条时，你正在点击它。这听起来像是我在使用滚轮上多了一个按钮的鼠标时遇到的一个问题。

相关文章：