Display HTML from Static Resource in VF Page

Question

I have a HTML file in Static Resource, which I need to display in one of the sections as an overlay in Visualforce page.

How can this be achieved? I tried including directly, did not seem to work

Answer 1

Got the fix, using jQuery.

//Get the URL of the HTML Page
var pageURL = "{!$Resource.ResourceName}/html/PageName.html";

//Load the HTML Content to the element(based on ID or Class)
$('.target-element').load(pageURL);

Answer 2

I suggest that you copy the content of your HTML file into a new Visualforce page. After that, insert that Visualforce page in your Page Layout section, or if you use Visualforce, use apex:include to insert the new Visualforce page into the current page.

Answer 3

Not sure if this is best practice, but I sometime use <apex:include> tag for same purpose.

First Create a VF page(say vftest) having HTML which you want to reference in other page.

You can do standardstylesheet = false and showheader = false as attributes of <apex:page>

then you can use this vf page(i.e.vftest) in any other VF page

 <apex:page >

 <apex:include pageName="vftest"/>
 </apex:page>