Make browser a basic html editor

While working on one of my recent blogs, I stumbled upon an HTML DOM property that looked interesting.

In past,

  • I have to see how the text change looks in a webpage – make change, refresh page or run the application again
  • I have to inspect, find the related DOM to make any text change to it and then write code to make the change to see it
  • I downloaded HTML page and then made some change in its text to add/edit/remove some comments for clean print.
  • Have some logic to provide an editable HTML page to users

Well, no more. Seems we have a new property (surely it was not there few years back but introduced recently): document.designMode

I tried in Firefox, from menu items, go to: Tools -> Web Developer -> Web Console. Write:

document.designMode = "on"

Post this, you can edit the webpage text right in your browser!

documentModeEx

Sample real use case could be providing a portion of page editable to users. Add that in an iframe and then turn the designMode of that to ‘on’:

iframeNode.contentDocument.designMode = "on";

A string indicating whether designMode is (or should be) set to on or off. Valid values are on and off

In IE, it would be under Developer Tools, and so on for other browsers.

design-mode
Browser Compatibility

Nice to have something like it to to convert browser into a basic HTML editor! Keep learning.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Document/designMode

Microsoft IE Support

Microsoft shared the following information with us in order to be better prepared. As per Microsoft Support Lifecycle policy, beginning January 12, 2016, only the most current version of Internet Explorer available for a supported operating system will receive technical support and security updates, as shown below:

Windows Desktop Operating SystemsInternet Explorer Version
Windows Vista SP2Internet Explorer 9
Windows 7 SP1Internet Explorer 11
Windows 8.1 UpdateInternet Explorer 11
Windows Server Operating SystemsInternet Explorer Version
Windows Server 2008 SP2Internet Explorer 9
Windows Server 2008 IA64 (Itanium)Internet Explorer 9
Windows Server 2008 R2 SP1Internet Explorer 11
Windows Server 2008 R2 IA64 (Itanium)Internet Explorer 11
Windows Server 2012Internet Explorer 10
Windows Server 2012 R2Internet Explorer 11
Windows Embedded Operating SystemsInternet Explorer Version
Windows Embedded for Point of Service (WEPOS)Internet Explorer 7
Windows Embedded Standard 2009 (WES09)Internet Explorer 8
Windows Embedded POSReady 2009Internet Explorer 8
Windows Embedded Standard 7Internet Explorer 11
Windows Embedded POSReady 7Internet Explorer 11
Windows Thin PCInternet Explorer 8
Windows Embedded 8 StandardInternet Explorer 10
Windows 8.1 Industry UpdateInternet Explorer 11

Microsoft Support Lifecycle policy provides consistent and predictable guidelines for product support availability when a product releases and throughout that product’s life. By understanding the product support available, customers are better able to maximize the management of their IT investments and strategically plan for a successful IT future.

Microsoft


They recommend to customers running on an older version of Internet Explorer to migrate to one of the above supported operating systems and browser combinations by January 12, 2016.

For more details, one can refer: https://support.microsoft.com/en-us/lifecycle#gp/Microsoft-Internet-Explorer

HTML5 Quick Start Web Application

HTML5 Quick Start


I was learning HTML5 features since December. While going through it, I was playing around making a sample web application fully HTML5 enabled – kind of self learning kit that would give a basic knowledge to anyone who goes through it. Plan was to publish it as an article so that others can learn quickly and have basic features at one place. One can play around with the feature implementation straight away post download.

It took me some time to write the article as it covered good number of features. I finished working on it and have published it today on CodeProject: HTML5 Quick Start Web Application

One can have a look at it there and provide feedback.

UPDATE: Missed uploading this to Github earlier, uploaded here: https://github.com/sandeep-mewara/HTML5QuickStart

Keep learning!

Browser Back button issue after logout

I have found a lot of people asking for a resolution to handle the browser’s back button once user has logged out.

Problem description

Typically, users reports something like:

I am facing issue in my application’s logout scenario. After the user login into website, he/she uses it(website) and when done, they do a logout, which leads them back to login page. But the problem is now, from this login page, if I click the browser back button then it again takes the user back to the previous visited page as if logged in. How can I stop user from viewing the previous page once logged out?

Assessment

The browser Back button is an option to go back to previously visited pages. The back button can be considered as a pointer that is linked to the page previously visited by the user. Browser keeps a stack of the web pages visited as a doubly-linked list.

The back button works by stepping through the history of HTTP requests which is maintained by the browser itself. This history is stored in browsers cache that consists of the entire page content with resources like image and scripts. This enables browser to navigate backwards and forwards through the browser history and have each page displayed instantly from cache without the delay of having it re-transmitted over the internet from the server.

Just to handle the scenario of getting page content from server, browsers have a Refresh button transmits the request to web server and get back the fresh copy of entire page. Internally, this also replaces the copy of the page in the browser’s cache.
Thus, basic reason behind the problem in discussion is Browser’s Cache!

Possible Resolutions

On Logout, one does clear the session to make sure user related data no more exists. Now, browsers cache needs to be handled such that browser has no history (this will make back/forward button in browser grayed out disabled.)

Here are various ways of how one can do it:

Option #1: 
Set Response Cache settings in code-behind file for a page

// Code disables caching by browser.
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetExpires(DateTime.UtcNow.AddHours(-1));
Response.Cache.SetNoStore();


Option #2:
Set META tag for HTTP cache settings in your ASPX page header

<META Http-Equiv="Cache-Control" Content="no-cache"/>
<META Http-Equiv="Pragma" Content="no-cache"/>
<META Http-Equiv="Expires" Content="0"/>


Option #3:
Clear browser’s history through JavaScript using script tag

<SCRIPT LANGUAGE="javascript">
//clears browser history and redirects url
function ClearHistory()
{
     var backlen = history.length;
     history.go(-backlen);
     window.location.href = loggedOutPageUrl
}
</SCRIPT>


Option #4:
Clear browser’s history through JavaScript injecting through code-behind file via Response

protected void LogOut()
{
     Session.Abandon();
     string loggedOutPageUrl = "Logout.aspx";
     Response.Write("<script language='javascript'>");
     Response.Write("function ClearHistory()");
     Response.Write("{");
     Response.Write(" var backlen=history.length;");
     Response.Write(" history.go(-backlen);");
     Response.Write(" window.location.href='" + loggedOutPageUrl + "'; ");
     Response.Write("}");
     Response.Write("</script>");
}


Option #5:
Clear browser’s history through JavaScript injecting through code-behind file via Page.ClientScript

Page.ClientScript.RegisterStartupScript(this.GetType(),"clearHistory","ClearHistory();",true);

Conclusion

Any one or combination of above can be used to handle the scenario.
Though, I would like to call out that it’s not a good thing to mess with browser’s history. One should implement it, only if they really need it and are prepared to accept that it is not a good practice. Lastly, few would not work if one disables JavaScript.

NOTE: I would not suggest to use it and mess with browser’s history as this is a bad thing. One should implement it, only if they really need it and are prepared to accept that it is not a good practice.

Keep learning!