A lightweight and easy to implement jQuery plugin that lets you embed and display real time content from any websites directly in your page. No server-side dependencies. No same origin policy constraints.
jQuery HTML Embed is designed to fetch, embed and display external content and hence unlike most "Ajax" requests, this is NOT subject to the same origin policy; it is designed to retrieve data from a different domain, subdomain or port without any server-side software, simply via a JSONP interface.
jQuery HTML Embed is lightweight and easy to use. To see jQuery HTML Embed in action, select one of the examples provide and / or try out various plugin options in the left pane
<!-- jQuery 1.7.2+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- jQuery HTML Embed core JS file -->
<script src="jquery.html-embed.js"></script>It’s not required, but we recommend placing JavaScript files and initialization code in the footer of your site (before the closing </body> tag). If you already have jquery.js on your site, don’t include it a second time, or use jQuery.noConflict(); mode.
Embeding external content is as simple as this:
<div class="content-embed"></div>$( ".content-embed" ).htmlEmbed({
url: 'http://example.com',
xpath: '//p',
// other options
});Options should be passed to the initialization code and separated by comma, e.g.:
$( ".content-embed" ).htmlEmbed({
url: 'http://example.com',
xpath: '//p',
processing: 'Loading. Please wait...',
// other options
});Here you can find the list of all available options:
| Option | Default | Description |
|---|---|---|
| url | null |
Source URL from where you need to fetch data |
| xpath | null |
XPath expression to retrieve specific portions of the HTML page. Without XPath all of the page's HTML will be returned, which may not be useful in an application. If you are new to XPath, XPath Syntax and XPath Examples on w3schools is a good starting point. |
| select | * |
By default all child elements of the specified XPath expression are fetched when the wildcard asterisk In most usecases, you would not need to use this option as the default |
| compat | html5 |
It can be configured to parse pages using the HTML 4.01 or HTML5 specification. By default its parsed using HTML5, but to parse using HTML 4.01 specification, you can set the value of this option to In most usecases, you would not need to use this option as the default |
| cache | 120 |
Timeout interval of the cached data in minutes. This is dependent on how frequently your source URL is expected to change content. If the content is not changed often, it is recommended to keep this as higher as possible to save external requests. Caching is done locally at a session level. |
| output | html |
Format of output rendered by the selector. Values can be |
| base_href | null |
Converts relative links from fetched content to absolute links. This can be handy to keep relative links functional. By default this will use the source URL itself intuitively to convert relative URLs to absolute; setting base_href to a specific URL will use that URL as the base for conversion. Note that base_href needs to be a complete URL (with http, hostname, path etc) Internally base_href converts href for a,area and link tags and converts src for iframe,img,input,script and source tags. |
| base_target | null |
Sets a specified target attribute for all links (iframe,img,input,script and source tags). This can be handy to make sure external links open in a separate window. Values can be Internally base_target processes a and form tags. |
| processing |
Text or HTML to be displayed while the external content is being fetched. |
|
| error |
Text or HTML to be displayed if there is an error while fetching external content. Use Apart from this, you can use the browsers console window to view detailed debug information |