Javascript load iframe asynchonous and auto resize - javascript

For our website we would like to give users the availability to include content of our website on their own website in an iframe. For this we would like to give the user a little piece of javascript code that they can include on their page without the need of too much programming knowledge. (like e.g. Facebook does for adding facepile to your page)
There are two concerns from my side. I want the content to be loaded asynchronous so the inclusion of our code will not affect original page load times ans secondly I want the script to automaticaly sets the height of the iframe based on the loaded external content.
I do not want to make use of frameworks like jquery, again to make it as simple as possible for a non code aware user.
I hope that someone can point me to the right direction. I've seen a lot of partial answers on the net, but I am looking for a more all in one solution. Any help would be high appreciated!

Maybe this helps: http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance. Take a look at the "Dynamic async iframe" section. They are using a nice trick by putting a onload event in the iframe document.

Check out this little library for resizing iFrames.
https://github.com/davidjbradshaw/iframe-resizer
The code that goes into the iframe, has no dependancies and does nothing until called by the parent page. So it's a good guest on other peoples sites.
All you would need to do is give people a link the js file hosted on your site.

Related

How do i hide my wordpress site page source like (bczcentral.com)?

Can i hide my wordpress blog site's page source like this? I have to ask this question because there are many plugins which can disable page source and right-click. but after typing manually "view-source:url" in browser it instantly shows the source-code of wordpress site.If any body knows answer please write down . this is very important for all bloggers 'I think' .
TLDR: No, you can never hide the soure code of your page. There is NO way.
For a browser to render a web site you need to send it the HTML, CSS, and javascript code. Even though you can make it "harder" to see the code by disabling right click, anyone with just a little bit of understanding of the web will be able to read it easily (F12 in most browsers).
As a website designer it is important for you to understand this concept as it is very important in deciding on how to design your web site. Things the user should not see need to happen on the server side (where no user can reach it). Only things which dont matter if anyone can see should be sent to the user.
I think you cannot hide the whole code. Or do you want to hide a specific part of the code? For example, you can hide/encrypt the URL of an iframe in which you can display more sensitive content. However, I also don't really know how to do it in WordPress (I searched for a solution many times) but I heard it's possible.
I'm curious what about the answers.
I wouldn't even consider doing this. Not only does it ruin the end-user's experience, it can actually stop people with disability copying text from your site or using other right-click menu items.
You can't hide your code, but you can obfuscate some of it.
CSS Obfuscater.
JSS Obfuscater.

PHP Javascript, Website which loads everything into a div is there a way to make the back button work

I am currently building a website but in an effort to prevent not necessary data to be loaded i decided to split but the website into serveral divs and load the content inside the div.
Because of this when i click on the back button i dont go to the previous location on the site but to where i was browsing before. Is there a way to solve this without rewriting the entire site? So for instance on my site there would be a members page that would be called upon using javascript by loading $('#content').load('members.php?id=$id');
For instance by creating a fake location...index.php#fakelocation (which contains the specific content i just loaded)
Can anyone give me a push in the right direction (or if this is impossible id like to hear it to)
I think what you're looking for is a combination of the History API and AJAX.
Lucky for you, there's a great library called PJAX that combines these technologies.
Without knowing more about how your backend works, I can't comment on additional steps to optimize the whole application, but PJAX is friendly with any number of server-side technologies.

Access main page elements from a separate page (PageSlide)

I am using the jquery PageSlide plugin as a menu on my site (http://srobbin.com/jquery-plugins/pageslide/) This opens a separate page on the side of the main page to act as a menu of sorts. But I was wondering how I could access the main pages elements from this side bar. For example I have an Iframe I want to manipulate from the side page, but I don't know how to accomplish this because they are on separate pages! Thanks, any help is appricated.
Iframes are evil IMHO and should be avoided as much as possible. As I mentioned in my comment earlier, you can not run JS from an Iframe that can act on the main page. That would be a VERY scary world if that was possible.
If you want to have menu that slides from the side like many current mobile apps.
I would recommend considering those options:
You can do that with pure jQuery with no extra plugins. There are many resources online and one is a question discussing this in detail as well as a simple demo for it.
You can look for plugins that can help you with what you are trying to do, with a quick search, I came across this. But I am sure there is more.

What is the best approach for a widget-container page - Ajax or iframe?

I need to implement a page of which many parts are dynamic widgets. Which widgets are loaded depend on user choice and are not known before hand. Each of these widgets include some HTML, and some javascript code (to initialize and attach event handlers on the HTML elements). I am wondering what is the best approach to implement such a page and widgets.
AJAX. I could construct response with some HTML followed by a <script> tag. Although returning js code in AJAX is not recommended, I found this works for me (the script get executed, with HTML widget properly initialized and handlers attached). An alternative is to include an 'all-included' script in the container page. In this script I wrap each of widget-specific script in a function, and when the widget is dynamically loaded, I call that function. However, this way I fetch a lot of js code that may not be used.
Iframe. I can also return the widget as a standalone HTML page to be loaded in iframes. This solves the javascript problem, but I need to make cross-domain calls to interacte with other part of the container page.
I think this should be a common problem faced by web developers. I am new to web development, could you share some 'best pratice' tips for my case?
You should be going ahead with jquery+ajax.. There are lots of drawbacks with iframes. Although you could handle each plugin in separate page and avoid any kind of conflict, usablitity becomes a great headache..
In the time of everything going HTML5 based to support mobile platforms, iframes are hard to cuztomise for mobile screens. Moreover iframe takes out the entire apple users as iframes are not supported by apple devices..
jQuery + Ajax(HTML5) along with CSS3 should be the way to proceed..

Un-obtrusive modal window in external site

Sorry for the title.....bit difficult to word what I really want to ask.
Some websites allow a user to copy and paste some widget for use with their own site. For example, getsatisfaction. Yes, those feedback icons that I hope most of you see in various places.
If you have a look at twitterfeed, on the left there will be a feedback icon, once clicked on a nice modal window comes up. the modal windows content is in an iframe to an external source.
I really like this, but my question is:
I could do the same by using some jQuery library for the modal window and then linking the modal content to a site on my page, but how do I stop this from becoming obtrusive to a sites other javascript files?
For example, let's say i'm using my js code and the relevant jquery code, and i've minified it into one file. The user adds my widget to their site. If they're using jQuery, how do I make sure my code isn't going to interfere with theirs?
Would the best way be to use a modal window library which is not very popular?
Thanks very much. Hope that makes sense!
EDIT: I could write my own modal window functionality code, but i'd much rather use a library which already does it.
You can dynamically load jQuery only if it is needed.
First check for the existance of the jQuery object. If not add the script tag.
There are some challenges to this, as there is no onload event when adding a script tag to a page, that works consistently accross browsers, so you will have to poll to see if it fully loaded, and only then run your code.
There is an article on how to do this:
http://www.squidoo.com/load-jQuery-dynamically
You may still have an issue if the user has a differnt version of the jquery library though, although you can probably get around this with some additional checks.
jQuery UI has very nice dialog components that should fit your purpose. Inside them you can instantiate an iframe. see:
http://elijahmanor.com/demos/jqueryuidialogiframe/index.html
If I understand all this correctly, the iframe content is a separate page, so there is no case where your javascript code in that page would interfere with the javascript of the calling page, but maybe I haven't understood that part correctly?
EDIT:
I think I understand what you meant, in that you want to package up the code that you will write that opens the modal window with the iframe. SO you want to make sure that this code does not interfere with existing jQuery code that the user is using.
I think this is a good use case for a jQuery plugin. This way the user of the page can use your function like any jQuery function, so less likelyhood of collisions

Categories