How to Get the Scroll Height of External Pages

Users don't usually need to log in to see an external page.

A Content Management Systems (CMS) allows users to create and administer content in internal Web pages that the system displays in external pages. For example, the internal pages of a blog CMS, such as WordPress, might allow an administrator to create a blog post, while the external pages present the blog posts to users. You can get the scroll height of a page, including an external page, using JavaScript to access the page's base elements and assess its height. Since Internet browsers implement these properties differently, evaluate all relevant properties and use the largest property to determine the scroll height.

Instructions

1. Open the Web page in a text editor or development environment.

2. Instantiate variables to hold the HTML and body elements of your page:

   var bodyVariable = document.body;

   var HTMLVariable = document.documentElement;

3. Assess each possible value for the height of a document and use JavaScript's "Math.max()" method to return the greatest value:

   var height = Math.max(HTMLVariable.clientHeight, HTMLVariable.scrollHeight, HTMLVariable.offsetHeight, bodyVariable.clientHeight, bodyVariable.scrollHeight, bodyVariable.offsetHeight);

4. Use the height in code, as required:

   alert(height);

Tips & Warnings

• JQuery and other JavaScript libraries also offer methods for determining the height of a page.

References

• jQuery: .height()
• MDN: element.scrollHeight
• "JavaScript: The Definitive Guide"; David Flanagan; 2011