CODEWITHSUNDEEP
jqueryhtmlajax
Stephen Martin
Stephen Martin

Reputation: 199

Load header and footer from external website onto my website

I will be creating a website, subdomain.example.com, that will exist in a different environment than example.com. The two websites will have the same layout to create a seamless experience. However, they will not share a database or codebase.

I would like the header and footer on subdomain.example.com to be identical to the header and footer on example.com. The info in the header and footer on example.com change periodically, so I want to be able to keep things consistent on subdomain.example.com. What are my options?

EDIT: example.com is a dynamic CMS, not static HTML. I don't have access to any of its code or templates.

Upvotes: 0

Views: 1572

Answers (3)

Mike Horstmann
Mike Horstmann

Reputation: 588

Well, that's still kind of vague and I'd be concerned about getting a CORS error on using plain AJAX if you're not the example.com site owner. That's what fjellfly is mention above as (XSS) or "Cross site scripting." So, you have a few options. One would be to run back-end Javascript like PhantomJS, or CasperJS.

If you're able to use jQuery AJAX, it would be similarly simple to that below:

$( "#navIdInYourSubdomain" ).load("http://example.com #navToCloneFrom"
);  
//That should either execute and load their nav element into your page 
//Or it will fail and do nothing, you could add an alert on failure

Link HERE (http://api.jquery.com/load/)

In the event this method fails out, then you can use a backend JS framework like phantomJS + casperJS (easiest) or NodeJS + cheerio (jQuery functionality for NodeJS), or PhantomJS by itself. However, this then requires a backend to be running. The benefit being headless browser engines like PhantomJS and Casper are AMAZING once you're capable with them.

The last method I would use is "Kimono" (https://www.kimonolabs.com/) where you can create an API to call from within any website/webapp. The benefit about Kimono is the scheduling, and the pre-fab scripts they offer for several prominent frameworks. Once you make an API out of this, you can construct your nav from an API scrape of your target's site using Kimono. It'll take a day to figure out, and then become one of the most useful tools ever.

One thing to consider if you're having issues with jQuery not related to XSS or CORS is that some CMS require the jQuery symbol be passed into the page after load see here: (https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/)

Upvotes: 1

fjellfly
fjellfly

Reputation: 388

If you can use php then file_get_contents (http://php.net/manual/en/function.file-get-contents.php) would be an option. You can filter the relevant parts with a regex then - or change the way the base-website delivers the content.

Another solution could be to use an ajax-request. In this case you'll have also develop a solution of how base-website is dealing with the request. But I'm not sure if such a ajax-request will end up with a security warning (XSS) or if it's allowed since it's the same top-level-domain.

Upvotes: 0

user3278087
user3278087

Reputation: 407

You should use iframe for you header/footer. Something like

<iframe src="example.com/path/to/header.html">

Upvotes: 0

Related Questions