One of the greatest things you can find out if you look deep into Microsoft Ajax framework is that there are 2 copies of each JS file that is part of the Assembly: System.Web.Extentions that is the main assembly in the framework. If the reflector if looks like this:
There are 2 copies of every js file since one is for debug and one is for release. If you take a closer look and open the debug one you will find out that the debug version is with comments, line breaks and a very readable code. The non debug mode file is with no comments , not line breaks and very trimmed.To understands here is a part of this file:
So this gives a very good ideas to us web developers. Whenever we have a bandwidth problems or whenever we wish to get better performance by minimizing the size of our js files. So how do we do this? Very simple. check out this web site JSMIN and download the utility that does exactly that.
This utility was built by Douglas Crockford.
Enjoy.
When we have a Web page hosting some other page with an IFrame in it we usually have no problems. But what happens if we try to host a page that is not our domain. This will work fine as long is there is no interaction between the hosting page and the IFrame source. As it turns out in the newer versions of IE there is a security issue when trying to access the DOM between the 2 Pages. (Or in other words when the 2 pages trying to "talk" to each other.
Lets se an example to this problem:
Lets say I have an ASPX file called p1.aspx which is the hosting page of some IFrame:
<form id="form1" runat="server">
<div>
This is the main page, with an iframe<br /><br />
<iframe src="p2.aspx" width="300px" width="100px"
scrolling=yes name="MyIFrame"
id="MyIFrame" frameborder=1>
To view this content upgrade your browser.
</iframe>
<br />
</form>
And Lets say I have a p2.aspx file that is the src of the IFrame in p1.aspx. I now want these 2 pages to somehow interact, so here is what I do:
- I am adding a button to p1.aspx to call some JavaScript method. These button will be used to change the src property of the IFrame to another page that is not in my domain.
<asp:Button runat=server Text="Change iframe to google"
OnClientClick="ChangeIFrame();return false;" /><br />
I am adding another button that will call another JavaScript function that will change the innerHTML of the Iframe:
<asp:Button ID="Button1" runat=server
Text="Update Content of the IFRAME"
OnClientClick="ChangeIFrameContent();return false;" /><br />
<script>
function ChangeIFrame()
{
document.getElementById("MyIFrame").src = "http://www.google.com"
}
function ChangeIFrameContent()
{
document.getElementById("MyIFrame").contentWindow. document.body.innerHTML = "222";
}
</script>
Now lets see what happens if I am trying to first change the IFrame src to www.google.com and then changing the content using the second button:
So what do we do to solve it and when you try to look for a good solution you will see several. I even worked once in a company that saved what ever she wanted in a DB and then every second checked if the DB with the given row was changes, took the values she needed and then apply them to the IFrame.(They had the 2 pages in a different domain but they had access to both of them).
So here is a good solution for this problem: (And this time with a different example).
Let's say I want my inner IFrame to change it's size if someone clicks some button inside it. I can't do it on his own since the page is hosted as an IFrame in a different page. Here comes the solution: In order to "talk" between the 2 pages the inner page will change it's own src and add a fragment identifier to the URL. When changing the URL by only adding it a fragment identifier the page will now reload.
The hosting page only have to check at each interval that the src of it's IFrame has changes and if so - do something. (Without busy waiting of course)
So here is the complete code for the first page:
This is the main page, with an iframe<br /><br />
<iframe src=p4.aspx width="300px" width="100px" scrolling=yes
name="MyIFrame" id="MyIFrame" frameborder=1>111</iframe>
1. The script for checking if the IFrame src has changed:
<script>
//Set a timer
function CheckWidthOfIFrame()
{
if(window.frames[0].location.href.indexOf("width") != -1)
{
var widthFragment = window.frames[0].location.href.split("#")[1];
var width = widthFragment.split("=")[1];
document.getElementById("MyIFrame").style.width = width;
}
window.setTimeout("CheckWidthOfIFrame()",1000);
}
</script>Notice that I am using a window.setTimeout to avoid busy waiting.
We have to start this function on the page load:
<body onload="CheckWidthOfIFrame();">
2. The hosted page source:
html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script>
function SetURL()
{
location.href = location.href + "#width=500";
}
</script>
</head>
<body style="background-color:yellow">
<form id="form1" runat="server">
<div>
I am an Iframe
<input type=button value="Change your size to 500px" onclick="SetURL()" />
</div>
</form>
</body>
</html>And that's it!
Ever wanted to highlight all the first letters of your paragraphs? Instead of getting angry on your employees and spending time on editing your mark up, here is a simple solution using a special CSS selector called: Pseudo selector. (There are many of them).
So, lets see a simple sample: Say you have some div's in your aspx,ascx, html file and you want all the first letters to be highlighted.
<div>
This is some paragraph containing some text.....<br />
this is some paragraph containing some text.....<br />
this is some paragraph containing some text.....<br />
this is some paragraph containing some text.....<br />
</div>
In order to make the first letter highlighted, I will use a type element selector in this case (That matches all the elements with the selector type), You can choose to use any other selector as well.
<style>
div:first-letter
{
font-size: 200%;
font-weight: bold;
}
</style>
And here is the output:
Enjoy