Safari is the main browser on iPhone and almost every one uses it to view the websites, read the articles and flip through the photos. But, as you know, it has limited functions as compared to desktop browser and one can not add the more features to it using third-party add-ons or extensions. However, hackers and developers have found some ways to add more flavors to it either by installing tweaks or by using the bookmarklets.
Bookmarklets are usually small pieces of javascript codes stored in Bookmarks section of the browser or in a link on a webpage. These bookmarklets give you one click access to a function, which usually requires more than one taps, in order to perform that action which is not supported by the browser natively.
In this article we have gathered some cook safari bookmarklets tricks which will allow you to view the source code of any website, use the firebug on a webpage and increase/decrease the font-size of the webpage’s text.
If you know how to use add and use the bookmarklet, you can skip this part and scroll down to get the actual javascript snippets. Otherwise, keep reading on to find what steps are required to add the bookmarklet in iPhone Safari browser.
How to Add Bookmarklet:
Step 1: First of all bookmak any webpage by tapping on the arrow sign on your iPhone/iPad safari browser. In this example we are bookmarking our main Shoutpedia webpage.
Step 2: Open the Bookmarks by tapping on “Book” sign on browser.
Step 3: Scroll down to the bookmark which we just saved and press the “Edit” button.
Step 4: Clear the title of the URL and type new title. For instance if we want to add the “increase font” bookmarket, we should rename the title to “F+” or simply “+” to save the space.
Step 5: Delete the URL part too and copy the javascript code in this area. The javascript snippets are at the bottom of this post.
Step 6: Come out of the Bookmarks folder by tapping on the “Done” option.
Step 7: Now open any webpage the font of which you want to decrease, go to bookmarks folder and tap the Bookmarkets we just created.
Step 8: We can also place these bookmarklets on the browser bar in iPad to save extra clicks.
Bookmarklet to View Source Code in Safari:
If you want to view the source code of any website in Safari, add this javascript in the URL portion of the bookmark. After saving, click on it and you can see the source code.
javascript:(function(){var d=window.open("about:blank"),a=d.document;a.write("<!DOCTYPE html><html><head><title>Loading Source</title></head><body></body></html>");a.close();var b=a.body.appendChild(a.createElement("form"));b.setAttribute("method","post");b.setAttribute("action","http://ole.michelsen.dk/viewsource/?uri="+location.href);var c=b.appendChild(a.createElement("input"));c.setAttribute("type","hidden");c.setAttribute("name","DOM");c.setAttribute("value",encodeURIComponent(document.documentElement.innerHTML));b.submit()})()
How to Run Firebug on Safari:
To use the Firebug in Safari, simply make the bookmarklet using this javascript code.
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
How to Increase Font Size:
This code will allow you to increase the font size of any webpage:
javascript:var p=document.getElementsByTagName('*');for(i=0;i<p.length;i++){if(p[i].style.fontSize){var s=parseInt(p[i].style.fontSize.replace("px",""));}else{var s=12;}s+=2;p[i].style.fontSize=s+"px"}
How to Decrease Font Size in Safari:
Here is the code to decrease font-size of webpage in iPhone Safari browser:
javascript:var p=document.getElementsByTagName('*');for(i=0;i<p.length;i++){if(p[i].style.fontSize){var s=parseInt(p[i].style.fontSize.replace("px",""));}else{var s=12;}s-=2;p[i].style.fontSize=s+"px"}
If you found this post useful, please share it with your friends. Leave you thoughts in the comments section too.
