PDA

View Full Version : jquery alternative to DHTML-iFrame-SSI-II or DHTML-iFrame-SSI-IV



giuma
08-26-2012, 04:40 PM
Script: Iframe SSI script II and VI

Are great script, I'm using them a lot and are great except for a few minor problems,
I would like to know if there are good alternatives jquery or ajax based solution with iframe.
I ask iframe because I think div are not good, in case of absolute links in the external source you are redirected outside while using iframe we can keep the navigation in original page.
so this for me is not good http://www.dynamicdrive.com/dynamicindex17/ajaxincludes.htm

whith Iframe SSI script II and VI it's possible to have an entire site full naviglable ina uno frame without redirect


i tried also this


<script>
function include_using_iframe_and_jquery(url,id)
{
$('html').append('<iframe src="'+ url +'" name="framename" style="position:absolute; width:0px; height:0px; left:-10000px" onload="$(&quot;#'+ id +'&quot;).empty(); $(&quot;#'+ id +'&quot;).append(frames[\'framename\'].document.documentElement.innerHTML)"></iframe>')
}
window.onload=include_using_iframe_and_jquery('some_file.html','some_div')
</script>

it's this a good solution?



thans again in advance for help

jscheuer1
08-27-2012, 06:04 PM
Neither of those are true AJAX (Asynchronous JavaScript and XML). The first is synchronous but otherwise uses some AJAX techniques, the second is using an iframe to fetch the contents then copying them from it. It's asynchronous, but otherwise uses no AJAX techniques.

An important note about all of these ways of doing things is that often there will be problems unless the pages are live on the web and all of the pages are on the same domain.

The difference between sync and async can seem subtle but generally unless you must use sync, async is better because it allows the browser to continue working while the request is being processed. This is particularly important if there's a problem filling the request, as that will halt all processing on a page if the request is sync. But even when the request is fulfilled, async is better because other things may be done in the meantime. The page load isn't held up waiting for the request to be fulfilled.

Using scripts such as the iframe SSI ones are easier to deal with because all you have to think of is in terms of full pages, one page showing through onto another, the 'top' page. With either of the two methods mentioned, as well as with true AJAX, you are only fetching the content of the page and putting it on the existing or 'top' page. You have just one page, not two, so javascript and css on the external page can be problematic.

With true AJAX though you can continually fetch various content, just like with the iframe SSI scripts.

I'm not aware of any stock scripts that use jQuery AJAX (its $.ajax() function*), though it's the easiest to use from a coding standpoint, that is it's flexibility and options. It requires an understanding of the AJAX process or at least of $.ajax() as a method though. There are scripts on Dynamic Drive that use true AJAX without jQuery, and perhaps some that do. If not, those will surely be coming as DD is converting everything over to jQuery as scripts get updated and/or replaced. A good basic example of AJAX that allows the fetching of various content is Dynamic Ajax Content:

http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Now back to jQuery. A very simple method of using jQuery to fetch content is it's .load() function:


$('#targetid').load('external.htm');

You need the jQuery library on the page. So a simple example would be:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
function loadpage(e){
$('#contentarea').load(this.href);
e.preventDefault();
}
$('a[data-ajax]').click(loadpage);
});
</script>
</head>
<body>
<a data-ajax="true" href="external1.htm">Page 1</a> <a data-ajax="true" href="external2.htm">Page 2</a>
<div id="contentarea"></div>
</body>
</html>


* for information on the $.ajax() method see: http://api.jquery.com/jQuery.ajax/

See also: http://api.jquery.com/load/ for information on the simpler .load() method used in the above example.

giuma
08-27-2012, 08:43 PM
a big thanks for usefull example, i'll use in future for other works
but in this case i can't use it, in need to keep visitors in one page were are placed iframe (for external content in the same server), because on the same server there are an old big website 10.000 more pages make by 3 frameset, menu, contents and footer.
i make a small restiling making a new website who load in one big central iframe only the main frame with contents, the visitors can navigate old contents of iframe in new graphics without exit, only whith iframe i view always page container of iframe with new graphics when the click links placed in old contents

iss iV it's great for this now, works on ie 8-9-10 an firefox and crome (no ie 7)