iFrame for lazy ajax result paging - html

I have a busy photo website that is currently making a new page request every time a user wants to load another page of results. I would now like to implement an AJAX/AJAX style paging effect, to only the gallery part of the page.
I can do this in jQuery/JS loading the different pages via AJAX but is this also possible, as a cheat, to use an iFrame? So when a user searches, post the input to the iFrame target and when they select a page number, post that to the iFrame target.
I ask this because I know there are some good uses of iFrames and bad ones. I would like to make sure this isn't one of the bad ones. I have read about browser back buttons causing issues with using iFrames. Will this be an issue here, if it's a good idea of course?

You could look into jQuery's .load() function here. That's what I'd recommend. the iFrame will still make a new page request. As well, .load() actually builds the content into your page, not just in a framed page. Looks a little more professional, works a little better, and isn't as heavy on the server (though 1 page load isn't much to it)

Related

Technique to enable smooth page changing and prevent the browser redrawing for each page load

I'll try explain the situation as best as possible..
I'm using ASP.NET with Bootstrap CSS. Every page uses the same master page. When I switch pages, the browser sometimes loads the new page without redrawing everything - only the HTML that has changed. Other times, it loads everything up again (so you see a white screen for a split second while the browser re-renders the HTML).
Is there a way I can configure the site to make the page transitions smoother? Has this got something to do with browser caching?
Well, although ASP.NET implements AJAX, and partial change of pages (through updatepanels for example) there's always a postback to the server with everything you do in .NET. Basically, there's always that "blank screen", but you probably don't see it in some cases, when the server answers quickly or you browser treats the HTML quicker for any reason.
The only possibility I know to avoid full postbacks is to get out of the .NET logic and do AJAX request yourself by writing client code only. But this possibly comes with other problems (like the controls you may add this way not being "known" by your server code, for example).

Global audio player for a website

I am building a website on Drupal 7 and want to add an audio player on the front page, and when the user goes to another page, I want the music to remain uninterrupted (to continue playing).
Is this possible without using frames tag?
You can do this by using javascript (more likely jQuery etc.) to load your content (via AJAX) into the page and insert it into a content block. This will allow you to avoid frames but adds new problems. For one you will need to change the way that most of what Drupal does for you to allow for this AJAX loading of content. That means the menus will need to trigger javascript not load a page. The same goes for links in the content.
With some clever jQuery you can bind much of that linking functionality with some live() events, but if you've never done that before it will be a bit tricky. To be more specific with this I'd need to see how your code really looked.
A plugin like jQuery BBQ can take some of the pain out of this technique but it isn't going to be a magical solution, just a powerful tool so you can do it yourself. http://benalman.com/projects/jquery-bbq-plugin/

Why AJAX over iFrames?

I am relatively new programmer, talking with a partner he told me, that before AJAX, he used a iframe to send data and change the content(obviously with help of JavaScript).
I understood that both are similar techniques, but i didn't find a article to describe their characteristic,
what are advantages of AJAX over Iframe ?
EDIT
i didnt find any explanation of the technique, but my partner told me he post the data trough a hidden iframe and submit the iframe, sound like just the iframe have to be refreshed, but i never did that
One advantage AJAX has is being able to read the state/status of the
request. You also have access to page headers, which you don't with
Iframes.
Ajax can handle multiple asynch requests. It's a little trickier
with Iframes as you need to create an Iframe per request (and keep
track of all of them to delete them later) instead of recycling the
same one.
Existing libraries are full of AJAX goodness and there is a larger community support base.
iframe
is a way show seperately two (or more) webpages in one
ajax
is a way to merge two (or more) webpages ( or new data ) into one
key advantages to Ajax I find are;
CSS will flow to the page called into it.
A way to retrieve data and update new information to the visitors without page refresh.
A fab mention to this site for it's clever use of Ajax.
A'Google instant' and suggestive searching is achieved via Ajax
Just my two cents:
I agree with Kris above that I wouldn't say they are comparable.
There's on use case that I find iFrames to be easier to work with over AJAX and that is if you need to submit a complicated form to another page but you don't need any response - the iframe route is by far the easiest to code.
Beyond that, AJAX, using a metaphor, acts a very knowledgeable go-between. It will handle multiple requests, the status of those requests, and hand back the data in the format you need.
I just wanted to add this because I didn't see in any of the answers.
The reasons to use Ajax are mostly about control, which you get a lot of. These reasons have been mentioned above.
One serious downside of Ajax, though, is that it is a JS fix. JavaScript is a great language, but people have been throwing it at every problem for a while now, and things which could be optimized if they were built in to the browsers, are now instead being done slowly (compared to compiled languages) with JS.
iFrames are a great example of this. They represent an incredibly common use case, wanting to include some html in some other html. Unfortunately, they aren't very amazing at it, often creating more headache than anything else.
If you want to include something and not have it mess with your site, nor your site to mess with it, iFrames are great. For the more common use case of including some random html in some other html, Ajax is better.
And here is the point I'm trying to make: this is dumb. There is no reason there shouldn't be something like an iFrame that acts more like Ajax. But, by jumping on board (as all of us did) with Ajax, we are now left with no choice.
The biggest reason this is a problem is that JS was never meant to be the absolute building blocks of the internet. Further, it's being used by pretty much every site around to violate user privacy. So, if you're looking for a good reason to use iFrames, this is mine:
It feels good to not need JS. If you can make your site improved by JS rather than dependent on it, that's a hard earned accomplishment, and the site will feel less "hacky" overall.
Anyways, that's just my input.
In my experience data loaded via AJAX is easier to manipulate versus data inside an iFrame. Also AJAX is really good for creating a better user experience. However I am not sure if I would necessarily put iFrames and AJAX in the same category because AJAX is asynchronous content and an iFrame is really just another page being loaded from outside of your site.
Also I could see iFraming creating SEO barriers and creating bad user experience. Honestly though if I had access to content I would prefer AJAX.

is there iframe equivalent or alternative method?

I am trying to find a iframe equivalent or alternate method of inserting a page into another page, the page will still need to be active, and when I submit a form or click a link within it, it will need to function like an iframe. I know iframes still work, but now that they have been depreciating over several years, I would like to find a new method. Is there one, and what kind of scripting am I looking at?
My answer: No, there is no alternative, at least if you need to embed a page with another domain.
It is logical because you shouldn't have any cross domain access to an embedded page (for example https://americanbank.com/), which can only be guaranteed if the embedded site is captured inside a frame. And since that kind of frame is exactly the iframe, there is no space for alternatives and no reason to not use it.
EDIT: Well I have to concede there are some tricky ways but never without accessing a server side dynamic site via AJAX. So it is somehow possible but not with a comparable effort.
You can ajax in external pages that is very similar to an iframe. jQuery makes this really easy.

Is it still advisable to use iFrame to show another page within an HTML? If not, is there an alternative?

What we plan to do is to display a particular page from another site on our webpage (not really a whole page but it's more like a box within a page with job listings on it). However, I heard iFrame is no longer advisable to use.
Is it still okay in this instance (only 1 page and 1 iFrame)? Or are there other alternatives?
#Breezer is right in the fact that you want to use iframes as little as possible for as little of your content as possible(for SEO purposes and the fact you aren't hosting the content, so it could go down at anytime). Aside from this, I doubt the page you are trying to display is being rendered in a way that you want to display on your site anyways. Being a third party site you can use something like curl (server side) to screen scrape the data and parse out what you'd like to display on your site. Or, if you're looking for a client side alternative, you can use YQL to grab that third party information and then render as you may.
Here's a great tutorial on YQL, and doing exactly what you want, from #Nettuts (http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-cross-domain-ajax-request-with-yql-and-jquery/)
Hope that gives you some options.
well it's fine using iframes to show another external webbpage, what's bad is building an entire website around a iframe because that will be hard to search engines to interrupt what your website is about therefore rank it lower in the search results