SharePoint Tip: Framing Another Website

 
Stephen Velasco's picture

Introduction

There have been some instances where I have had to expose a webpage onto another webpage. This is usually accomplished by using the "Page Viewer" webpart, but if you have ever tried this then you know that this webpart exposes the entire page within the webpart - usually ending up in having to scroll around the window to find what you needed.

Plus it doesn't look good. Look at the embedded page below, somewhere within that embedded page is a document library which is what I actually want to show.

This demo will attempt to show how to only expose an area within the page that you would like to show. It will look a lot cleaner and, hopefully, make more sense to your users who need to see whatever is in this "page within a page".

What you will need

  • A page where you need to show the contents of another page (either intranet or Internet)
  • A Content Editor webpart
  • Some custom HTML and, maybe, CSS (depending how far you want to go)

Procedure

Instead of using the "Page Viewer" webpart, we will be using a Content Editor. Within the page that needs to have the embedded page, insert a Content Editor Webpart (CEWP).

The code that we will be using is as follows

 ----------------------

<div style="width: 971px; height: 112px; overflow: hidden">
<iframe src="http://[site URL goes here]" scrolling="no"
    style="margin-top: -300px; width: 1000px; height: 1000px; margin-left: -200px">
</iframe>
</div>

 ----------------------

Going through this code you can see that the <div> is where you set the scope of the viewable area. This means that everything outside of this area is clipped (overflow: hidden) and will not be shown. The <iframe> defines the address of the page and defines that scrollbars should not be shown. The width and height of the iframe is where you make sure that all the content is being displayed within the defined frame. You need to set all these parameters and keep testing until you see the exact portion that you want to expose.

 Here is the Content Editor with the html code that only exposes the part of the webpage:

Now, that may be enough, but there is the possibility of going a bit further and adding the possibility of redirecting the users to the exposed page. In this case we would need to add an extra <div> tag over the iframe. The users click on the exposed data and are taken to that page.

 ----------------------

<a href="[site URL goes here]"> 

<div style="z-index: 2; position: absolute; filter: alpha(opacity = 0); background-color: white; width: 971px; height: 112px; top: 2032px; cursor: hand; left: 20px; opacity: 0.4">
</div>

<div style="width: 971px; height: 112px; overflow: hidden">
<iframe src="[site URL goes here]" scrolling="no" style="margin-top: -300px; width: 1200px; height: 1000px; margin-left: -200px">

</iframe>
</div>
</a>

 ----------------------

Please note the "top: ;" value. This value is the number of pixels from the top of the page to the top of the clickable area. So, if the clickable area needs to be a bit further down the page instead of right at the top, then you just add that number to the "top: ;". For example, having the area (defined by "width: ;" and "height: ;") starting 100 pixels down means "top:100px;". The same goes for the "left: ;" value.

Here is the Content Editor with the html code that only exposes the part of the webpage, now click-enabled:

One final note, this solution, as it creates a ”static” frame, will need to be checked and updated if the exposed page layout changes. The “window” (as well as the CSS overlay, if used) has fixed coordinates and will not automatically follow any layout changes to the exposed page – so you will have to manually update the coordinates (top, left, height, and width).

Conclusion

This demo attempted to show how to define an area of a webpage so that only the chosen area was exposed when embedded within another webpage. As was shown, this can be accomplished by a few html/CSS code lines within the sharepoint environment itself with no need for custom applications or Sharepoint Designer. I hope you have found it helpful.

 

 

Feedback Form