I have been reading up on this, and it seems that if you use ajax you can only bring in content that resides on the same domain whereas with an iframe you can bring in content from any domain. Is that the case? What other differences are there?
Bear in mind they're two completely separate technologies.
A (i)frame really loads a complete HTML page in area into the browser. Whether the page is on the same or another domain, for pure viewing, doesn't matter.
Ajax only describes a system to facilitate JavaScript to talk with (and with current security restriction across browser, only with) the server from which you document within which you generated the JavaScript call from.
The (i)frame technology loads and renders a complete HTML page from any URL given. Certain security restrictions accessing other documents from other domains with JavaScript still apply.
With Ajax, it's only meant to use purely JavaScript to talk to the originating server (send some data) and usually get some data back. In JavaScript. What this data is and what you do with it, is up to you. Whether you insert it into the DOM (Document Object Model), exchange parts or load a new page is up to you.
To a certain degree you have all freedom you want. You can have an (i)frame on a page, still make a Ajax call and decide to load another URL into the (i)frame. Or use the Ajax return value to generate new HTML dynamically inside the (i)frame. Or outside, in another document.
The security restrictions applying in this case is called "same origin policy".
Quite simply, an iframe is like a regular frame, but it doesn't split the browser window up into sections, it sits right inside a page and is affected by the scrollbar.
Ajax, on the other hand, uses javascript to do partial loads of a page, allowing small amounts of data to be loaded from the server without needing to do a complete postback. For example, Youtube uses Ajax when you post comments, vote, queue videos to play, etc. They do this so that your video isn't interrupted and restarted by a complete page postback.
Besides these differences mentioned by others, there are others as well.
iframe loads an entire html/php page, whether it is from the own server or other external server. Usually, it has a fresh <html>, <head> and <body> tag as well. Ajax only loads part of the html/php page.
Besides, Ajax pulls the CSS (and maybe, even javascript codes) from the parent file, but in case of Iframe, it cannot pull the same.
E.g this is the master file coding.
<!doctype html>
<html>
<head>
<style>
.gappu {background-color:black;color:red;}
</style>
<meta charset="utf-8">
<script src="../AllJqueries/jquery-1.11.3.min.js"></script> <!-- Use your own jQuery file -->
<script>
<!--
$(document).ready(function(){
$.ajax({url:"slave1.php?bare=true", success:function(data){
$(".myDomain").html(data);
}});
}); /* End of Main Jquery */
//-->
</script>
<title>Ajax vs Iframe</title>
</head>
<body>
<div class="myDomain"></div>
<div>Iframe below</div>
<iframe width="100%" height="500px" src="slave1.php"></iframe>
</body>
</html>
Now, we also have another file, named as slave1.php
<?php
if(isset($_GET['bare'])) $bare = $_GET['bare'];
else $bare = false;
if(!$bare):
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.gappu {background-color:blue;color:yellow;}
</style>
<!-- You can remove the above style later, and see the difference. The parent style will not apply for iframe -->
<title>Inside the Iframe</title>
</head>
<body>
<?php endif; ?>
<div class="gappu">Hi, welcome to this demo</div>
<?php if(!$bare): ?>
</body>
</html>
<?php endif;
In case of Ajax call, the line Hi, welcome to this demo will be in black background and red color, since it is borrowing the css from the parent. But in iframe, it will be in blue background and white color, which is defined in slave1.php. You can remove the style from slave1.php, and you will find plain text printed in iframe format.
Hope this helps. Cheers.
Vijay Srinivas
Related
From what I know, the browser can only request the assets (JS, CSS) after parsing the HTML. But analyzing the "Performance" tab on Edge's DevTools, the "Send Request" for the w3schools30.css stylesheet happens before the parsing is even started, as we can see indicated by the green arrow and other data in this image.
I'm using a simple example. Here's index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3schools30.css"/>
</head>
<body>
Performance testing
<script src="index.js"></script>
</body>
</html>
And the index.js:
setTimeout(() => {}, 1000)
Am I misunderstanding the timeline or there is a circunstance where this happens?
I think it is related with a feature called "preload scanner" on Chromium browsers. This article says:
A preload scanner's role is speculative, meaning that it examines raw
markup in order to find resources to opportunistically fetch before
the primary HTML parser would otherwise discover them.
I have a webpage that uses an iframe to embed another one of our websites. However, FireFox is having issues rendering the contents of the iframe. When I inspected the raw html that was in the DOM, I noticed the following DOM structure inside the iframe:
#document
<!DOCTYPE html>
<html>
<body></body>
<head> … </head>
<body> … </body>
</html>
Notice the body tag above the head tag - that's not in the source DOM! Removing it from within the developer tools fixes all of the rendering issues. For some reason, FireFox is adding a second body tag just before the head tag. Here is my puzzle:
The extra body is not in the source HTML being delivered
The extra tag only shows up in FireFox, Chrome and IE do not have it in there iframes
If I go straight to the url the iframe is loading in FireFox, the extra body tag is not there!
I have no addons - FireFox install is clean
I have the latest FireFox as of this post (v24.0)
Does anyone know what could be causing this? The site being embedded is really simple and does not have any javascript that could be adding this extra tag.
I don't know what causes this to happen in some FF iframes and not others, but if you have access that allows you to change the code of the page that is loaded into the iframe, you could add this script that removes the first empty body tag:
<script type="text/javascript">
var ffFixCount = 0,
clearExtraBody = function(){
var bodies = document.getElementsByTagName("body");
if(bodies.length > 1){
// assumes the empty, extra body tag you want to remove is the first one
bodies[0].parentNode.removeChild(bodies[0]);
window.clearInterval(ffBodyFixer);
}else{
ffFixCount++;
}
if(ffFixCount = 20){
window.clearInterval(ffBodyFixer);
}
};
//check for extra body tag will run every 100ms,
// 20 times, or, for 2 seconds (to give time for bug to happen)
// or will stop if extra body tag is found
var ffBodyFixer = window.setInterval(
function(){
window.clearExtraBody();
}, 100);
</script>
i was looking at this website and i am interested on how did the developer managed to load different htmls in a single page without the current page being reloaded...
here is the website: http://demos.kendoui.com/web/validator/index.html...
for example if you clicked globalization in the Framework section, you can see the url changed, the body changed also but a part of the page remains (the top part) and the current page is not reloaded...
i am just starting in web development and i want to know this technique... i hope you can share it to me.... thanks :)
It is using ajax partial updates. You send request to the server and get portion of the page and then place it in some element, for example in div.
Normal:
<html>
<head>
<head>
<body>
<div id="divToUpdate"></div>
#Ajax.ActionLink("Call Partial", "MyAction", "MyController", AjaxOptions{ UpdateTargetId = "divToUpdate" })
<body>
</html>
Partial:
<span> here is my partial view which will be placed in "divToUpdate" div after clicking "Call Partial" Link </span>
I'm developing a website in ASP .NET MVC 2 using C#.
I have a partial view, Header.ascx. In there I have an image for my website, MainImage.png.
When I use one of the primary Views I've created, the image shows up fine. For instance, I hit the Index ActionResult of my News Controller. (site.com/News)
However, when I dig deeper, I seem to lose my image, even though the Partial view is being displayed from the Master page. i.e., if I try going to site.com/News/Article/1
Are there any suggestions for keeping my image fully intact, such as a way to do absolute pathing?
The code I currently have in my partial view is here:
<div align="center"><img src="../Content/images/MainImage.png" style="border:none" /></div>
I've tried changing the src to ~/Content/images/MainImage.png but that breaks it all over the site.
Use the Url.Content helper method.
<img src="<%: Url.Content("~/content/images/imagename.png") %>" />
Same applies for when you want to include javascript files or css
<link rel="stylesheet" href="<%= Url.Content("~/content/site.css") %>" type="text/css" />
<script type="text/javascript" src="<%= Url.Content("~/content/scripts.js") %>"></script>
Whenever possible, make the path (href or src) to resource files, like images, CSS and JS relative to the web server root. That is, your URLs should begin with a slash:
<img src="/images/imagename.png" />
That format retains the current server address (which may be an IP address, an internal network address or any of a number of public web addresses), protocol and port, and doesn't depend on the apparent path of the page the user is looking at (which can change, depending on whether the user is accessing the page by its canonical location or by a URL rewrite).
I'm using AJAX inside my JSF portlet. When the session expires, We are suppose to get the following message(this is the response of AJAX request when session expires)
This page is used to hold your data while you are being authorized for your request.
You will be forwarded to continue the authorization process. If this does not happen automatically, please click the Continue button below.
<CONTINUE BUTTON>
In IE 6 and 7 I can see the continue button. But in Firefox I don't see that button. Only the text is visible.But in the source code I can see that section, but it is grayed in Firebug.I've the screenshot uploaded to http://img31.imageshack.us/img31/619/firefoxcontinue.jpg
Ideally it should automatically forward the user to the login page, since AJAX cannot redirect that, it just displays the response.So Continue button has to be shown inside the portlet. Can someone please tell me why the HTML form is not shown in Mozilla Firefox.
Thanks
I created a test page. The problem is there when we try to insert the Form inside a table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script type="text/javascript">
function insertAjax(){
// alert('inside ajax');
document.getElementById("wpsportlet").innerHTML='This page is used to hold your data while you are being authorized for your request.<br/><br/>You will be forwarded to continue the authorization process. If this does not happen automatically, please click the Continue button below.<form action="http://www.google.com" method="get" name="AUTOSUBMIT"><input type="submit" value="Continue"/></form>';
}
</script>
<input type=button value="Submit" onclick="insertAjax();">
<div id="wpsportlet">
</div>
</BODY>
</HTML>
If I nest the form inside a table then the Form is not displayed in Firefox. Can someone please help a work around for this.
Your generated DOM is invalid. Character data (text) and <br>, <form> and <script> elements may not be child elements of elements - only <tbody>, <thead> and <tfoot> element may (although in XHTML you can have <tr> elements too).
For those elements to exist inside a table, they must appear entirely within a table cell.
Given broken HTML, Firefox will do a good job of compensating for author errors, but when the broken DOM is generated with JS, you bypass some of the autocorrection routines.
As an aside, your Doctype (HTML + Transitional + No system identifier) triggers Quirks mode - which doesn't generally help matters.
I suggest:
Switch to a Doctype that triggers Standards mode
Validate your markup
Build the content you are adding with JavaScript using plain HTML instead
Make that validate
Write JavaScript to generate the DOM you have now tested as being valid
Why don't you add a button using JavaScript when the response is shown to the screen?
This way should work on all browsers...
function addButton() {
//Create an input type dynamically.
var element = document.createElement('input');
//Assign different attributes to the element.
element.setAttribute('type', 'button');
element.setAttribute('value', 'Continue');
element.setAttribute('name', 'somename');
element.setAttribute('id', 'someid');
var foo = document.getElementById("fooBar");
//Append the element in page
foo.appendChild(element);
}