HTML Object元素和滚动条问题

Question

我正在使用以下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浏览器窗口的高度要大。

但是，当我第一次单击垂直滚动条时，页面会滚动...在那之后，无需单击，只要鼠标位于垂直滚动条上方，页面就会自动滚动，而我实际上并没有点击滚动。

有人遇到过这种情况吗？你能否提出解决方法？这是一种奇怪的行为，我以前从未见过...

- mike01010

---

为了澄清，当我点击滚动条时...它似乎永远不会释放，并保持在按下/粘住模式。 - mike01010

问题是，你是否需要滚动功能？ - A.J. Hernandez

1. 这很可能是浏览器的一个 bug。
2. 如果浏览器支持对象标签 API，则根本不应该显示滚动条。
3. 如果它仍然显示滚动条，那么滚动条属于嵌入式浏览器元素，其鼠标释放序列在滚动期间丢失。

- Bekim Bacaj

这个漏洞已经在Chromium跟踪器中报告了多次，但似乎没有提出解决方案。请参见问题[305335]（https://bugs.chromium.org/p/chromium/issues/detail?id=305335），[406611]（https://bugs.chromium.org/p/chromium/issues/detail?id=406611）和[601377]（https://bugs.chromium.org/p/chromium/issues/detail?id=601377）。 - ConnorsFan

Answer 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>

- Javier Rey

Answer 2

尝试使用以像素为单位的max-height属性，并使用overflow属性进行滚动...

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

- Aqueel Aboobacker VP

Answer 3

使用iframe比使用embed更好。

iframe：

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

embed：

在HTML5中标准化，但在此之前，它是一个非标准标记，尽管所有主要浏览器都实现了它。HTML 5之前的行为可能会有所不同...

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

可以做什么和不能做什么的嵌入内容的详细信息取决于浏览器插件。但对于SVG，您可以通过类似以下内容的方式从父文档访问嵌入的SVG文档：

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

在嵌入的SVG或HTML文档中，您可以使用以下方式访问父级：

parent = window.parent.document;

对于嵌入的HTML，我没有找到从父级获取嵌入文档的方法。

- Chetan Panchal

---

如果这个回答能够真正回答问题并且 OP 没有使用 <object>，那么它会更好。在对象中使用 HTML 页面可以很好地定位到父文档。 - Mr Lister

Answer 4

可能与硬件有关。如果您在选择滚动条时单击鼠标上的按钮/滚轮。这听起来像是我曾经遇到过的一个带有额外按钮的鼠标出现的问题。

- user1911872