Having a blog is not enough but having a web space to host files makes the stuff more easy. Well, right now I am busy with my first web app that will let user to customize Blogger widgets without knowing a single line of code.
In beginning I wasn't able to execute this idea because right now I do not have web hosting and it was a necessary part of this app. But luckily when I googled it out, I found Google drive let you do this. After putting files, I just loaded them using jQuery load function and they just loaded. This means they can be loaded via cross-domain.
Why should I host them?
Web apps may contain so many script that loading them in single page load can increase too much loading time. Those web apps that requires many scripts to be loaded occasionally, like on click of button or submitting a form. Then by hosting them you simply put them on web but load them when necessary.
The most common examples are polyfills. We test some feature and if it fails then only we load polyfills otherwise what is the purpose behind having polyfill if we load then on page load? If we start considering page loading time then this helps a lot.
IE8 have a known problem of letting the user stop the script. If IE8 finds any heavier client side script then it alerts user to stop it, if user will stop it then whole application will fail. The best way to tackle it out is not to let IE make that error. By loading them on specific events we can solve this problem.
How to use it?
Step 1: Go to Google Drive,
Step 2: Login if you are not.
Step 3: Click New (a red button on left side)
Step 4: Then click on upload file and upload the file.
Step 5: Get the doc id. Do get the doc ID click on share:
The URL in the popup should look like this:
https://drive.google.com/file/d/[DOC ID]/view?usp=sharing
Step 6: The highlighted part is doc id, put this id in this URL.
www.googledrive.com/host/[DOC ID]
If you will run this URL, it will open the HTML, CSS or Javascript file you uploaded. You can link CSS or JS files directly into HTML documents using script and link tags or you can load them using jQuery's load function.
Use load function
If you have used jQuery load function, then you have nothing to do with this section, you can just put URL and simply load the resource into a container. Google Drive let you load the file from cross domain.
If your markup have a div with class result. Then you can load the content and put the loaded content in result div with this code.
$(".result").load("www.googledrive.com/host/[DOC ID]");
Further you can read the docs here about AJAX load event. If you are looking to fetch Blogger recent post or JSON feeds using jQuery then read this or you can simply do that with Javascript, read it here.
Limitations
You cannot do server side scripting on Google Drive. Means if you are thinking of collecting the form submissions or saving the user collected data, then its not possible on Google Drive.
Post A Comment:
0 comments: