Embed Embedding webpages and PDF's really shouldn't be rocket science.

Easily embed a PDF file or another webpage within your stacks page. This free Embed stack cuts out the requirement for any complicated code or tedious scripts. It instead uses the widely-supported HTML <object> tag which works great with all modern web browsers and does not cause validation errors or breakage to RapidWeaver themes.

Webpages get rendered safely, similar to an iFrame, and there is little risk of code in the framed webpages from leaking out into your web page. PDF files get rendered in a frame, complete with scrollbars. You can specify a width and height for the Embed stack, within the provided settings. Likewise settings also exist to display a customisable error message and specify the type of document to be loaded. Setup is simple and straightforward. You can safely use multiple Embed stacks on the same page.


Example

Trouble viewing the PDF? Click here instead: http://dl.dropbox.com/u/422052/stacks4stacks/test/embed/example.pdf


Setup

  1. Once installed, drag and drop an Embed stack into your stacks page.
  2. In the Embed settings shown on the righthand side in edit mode, enter the URL of the webpage or PDF you wish to embed. Type this address carefully, to ensure it is correct.
  3. Optionally, you can customise the error message. This is the error message displayed if a web browser does not support frames or has live viewing of PDF's turned off.
  4. Use the provided height and width settings to define the height and width of your embed stack (take care to ensure the embed stack does not overflow outside of the theme content container).
Important There is a known bug in Safari 5.1.1 which may prevent PDF content from being displayed inside a page. However the error message and a link to the PDF will still get displayed, so it would still be possible for an end user to access the PDF. If you are running Safari 5.1.2 (released on 2nd December 2011) this bug is resolved.


Source Code

This is the source code used to create each Embed stack. As you can see, it uses the HTML <object> tags.
<object data="http://www.example.com/path/to/file.pdf" type="application/pdf" width="800px" height="600px">
  Trouble viewing the PDF? Click here instead: http://www.example.com/path/to/file.pdf
</object>
In the above code, change the URL http://www.example.com/path/to/file.pdf to the name and location of your stored webpage or PDF file. If you are embedding a webpage, change type="application/pdf" to type="text/html".

This code can be saved as code snippets in RapidWeaver, for use in non-stack pages. To do this, highlight the code in your web browser and then right-click on it. Select Copy from the popup menu, to save it to your clipboard. In RapidWeaver, open the snippets window by clicking View > Show Snippets from the RapidWeaver menu. In the snippets window, click the '+' button, in the bottom left. Type a name for the new snippet and paste the code into the box shown. From this point onwards, you will be able to easily retrieve code snippets in RapidWeaver and reuse them in different pages. You can customise the code to suit your requirements.