HTML Object element and scrollbar issue

Question

I am using the following HTML to embed HTML from an external URL into my site and it works great:

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

On the page, a vertical scroll bar is shown, which is the correct behavior I expect, as content is larger than the height of the Chrome browser window.

However, when I click the vertical scroll bar for the first time, the page scrolls... After that, without clicking, the page scrolls whenever the mouse is over the vertical scroll bar, WITHOUT me actually clicking to scroll.

Has anyone seen this, and can you suggest how to solve? It's a weird behavior I have not seen before...

Answer 1

I have tried your object + embed approach, and encountered the same problem with the scrollbar. The Chrome browser seems to not trigger the mousedown on the scrollbar, but does fire the mouseup, which looks like a bug. Why not try an iframe? It works as you expect, I think:

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

To make it span the entire window, set these styles:

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

Answer 2

It would be better to use an iframe instead of an embed.

iframe:

The iframe element represents a nested browsing context. The HTML 5 Standard describes "The element" as primarily used to include resources from other domains or subdomains, but can be used to include content from the same domain as well. The iframe's strength is that the embedded code is 'live' and can communicate with the parent document.

embed:

Standardized in HTML 5, but before that, it was a non standard tag, which admittedly, was implemented by all major browsers. Behavior prior to HTML 5 can vary...

The embed element provides an integration point for an external (typically non-HTML) application or interactive content. The HTML 5 Standard describes "The element" as used to embed content for browser plugins. Exceptions to this are SVG and HTML, which are handled differently according to the standard.

The details of what can and cannot be done with the embedded content is up to the browser plugin in question. But for SVG, you can access the embedded SVG document from the parent with something like:

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

From inside an embedded SVG or HTML document, you can reach the parent with:

parent = window.parent.document;

For embedded HTML, there is no way to get at the embedded document from the parent (that I have found).

Answer 3

Try using the max-height property in pixels, and use the overflow property to scroll...

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