Question

我使用以下HTML将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浏览器窗口的高度。

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

有没有人见过这个，你能建议如何解决？这是我以前从未见过的一种奇怪的行为......

Answer 1

我已尝试过你的object + embed方法，并遇到了滚动条的同样问题。 Chrome浏览器似乎没有触发滚动条上的Nov 8 20:28:20 ubuntu docker[23092]: time="2016-11-08T20:28:20.171385360Z" level=warning msg="2016/11/08 20:28:20 [ERR] memberlist: Failed TCP fallback ping: read tcp 10.0.0.85:54016->10.0.0.13:7946: i/o timeout" Nov 9 18:26:17 swarm-node-01 docker[714]: time="2016-11-09T18:26:17.573441271Z" level=warning msg="2016/11/09 18:26:17 [ERR] memberlist: Failed to send indirect ping: write udp [::]:7946->10.0.0.38:7946: use of closed network connection"，但会触发$scope.$watch('val', function(newval) { $rootScope.value = newval; });，这看起来像一个错误。为什么不尝试iframe？我认为它按预期工作：

mousedown

要使其跨越整个窗口，请设置以下样式：

mouseup

Answer 2

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

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

Answer 3

最好使用iframe而不是嵌入。

<强> 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，无法从父级（我找到）获取嵌入式文档。

Answer 4

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

HTML对象元素和滚动条问题

4 个答案: