jakeis.com = doing things @ Jake Jilg's personal home page = jakeis.com
(aesthetic only)

jakeis.com = Jake Jilg, doing things....

Jake Jilg
JSONp to Include Any HTML

Tumblr secondary blogs could not show your following blogs.

When I had a Tumblr, I made a JSONp to grab my following-blog icon/links page and inject it into the pages of my secondary blogs, which have their own subdomain.


(hence no AJAX because x-subdomain is still x-domain)

This is a JSONp, and JSONp is x-domain ajax; it goes in the src of a <script> element, and it functions as an asycronous callback, because it's a dynamic script taking a query.

My query excludes the ? but it's a query. It does that in case the url in query has its own ? query. So you can put your query in the two green parts of this v.


and then this ^ will make a jsonp such as this v

var replaceMyThing = function() {
// big html textNode
var elementFragment document.createElement("externalpagecontainer");
elementFragment.innerHTML "<h1>\r\n\tI am HTML from another page!\r\n<\/h1>\r\n<p>\r\n\tHam! How did I get here!?\r\n<\/p>\r\n<p>\r\n\t<img \r\n\t\tsrc=\"\/img\/temp.png\"\r\n\t\twidth=\"418\"\r\n\t\theight=\"512\"\r\n\t\tstyle=\"width:418px;height:512px\"\r\n\t\ttitle=\"I'm certain that I'm on http:\/\/jakeis.com\/other_stuff\/example.html\"\r\n\t\/>\r\n<\/p>";
// replace scriptNode
var scriptNode document.getElementById("jsonelementid");
document.readyState === "complete") {
} else {

Which is better than an iFrame to include an html.

Why Not Asynchronous XMLHTTPRequest?

This uses PHP CURL that can get any domain, so like if you are using sub-domains like a freshman web designer, because sub-domains aren't a URL appearence preference, but also a security thing for hosting, etc.

+better if you own the domain for stability and design/callback purposes, etc.

So this whole <div> container will be replaced with html from https://jakeis.com/other_stuff/example.html

Functioning example!

This ^ <div> element container has id="replaceMeWithJSON",
and this ^ button will run this v script onclick. var js document.createElement('script');
js.type 'text/javascript';
js.src '/webapp/json/include_page/replace/replaceMeWithJSON/with/https://jakeis.com/other_stuff/example.html/json.js';

The quickest way to make this ^ happen is with an id attribute on the replaceable script element with src of the jsonp in location, without creating a script dynamic, but I needed a live example.

PHP View-Source Link for Curiosity

Proudly NOT powered by any monopoly blogging platform, but many great thanks to Chromium/Mozilla DevTools, MAMP/Apache, and Notepad++/TextWrangler because they did all the real work here. I, Jake Jilg am just a designer.
Blogs & Blogs
    • Blog under construction.
    • Blog coming soon.
    • Blog under construction.