How to display html page inside an iFrame via link

Displaying a page inside iFrame via link is as simple as setting Target property of a link to the iframe name. The important part is to make sure iframe has both "id" and "name" attributes.

<a href="http://elena-sqldba.blogspot.com" target="myFrame">Elena's Blog</a>

<iframe id="myFrame" runat="server" width="500" name="myFrame">
        
</iframe>

How to load external pages into a DIV

Loading external html pages into a DIV without having to reload the browser or using iFrames is possible using AJAX and JQuery.

First add a DIV to your html page

<div id="contentarea"></div>

Then save jquery.js file in the dame directory as your html page and add reference to jquery to the head section of your page:

<script type="text/javascript" src="jquery.js"></script>

Then add the following script to the head section:

<script type="text/javascript"> 
<!-- 
    
         $(document).ready(function(){
          ajaxpage("http://elena-sqldba.blogspot.com", 'contentarea');
         });


 function ajaxpage(url, containerid){
      var page_request = false
      if (window.XMLHttpRequest) // if Mozilla, Safari etc
           page_request = new XMLHttpRequest()
      else if (window.ActiveXObject){ // if IE
          try {
               page_request = new ActiveXObject("Msxml2.XMLHTTP")
          } 
          catch (e){
               try{
                   page_request = new ActiveXObject("Microsoft.XMLHTTP")
               }
               catch (e){}
          }
      }
      else
          return false

      page_request.onreadystatechange=function(){
          loadpage(page_request, containerid)
      }
    
      page_request.open('GET', url, true)
      page_request.send(null)

 }

 function loadpage(page_request, containerid){
      if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
       var divElement = document.getElementById(containerid);
          divElement.innerHTML = '';
       
          try {
             divElement.innerHTML = page_request.responseText;
          }
          catch (e) {
             // IE fails unless we wrap the string in another element.
             var wrappingElement = document.createElement('div');
             wrappingElement.innerHTML = page_request.responseText;
             divElement.appendChild(wrappingElement);
          }        
         } //end if
 }


 
// --> 
</script>

Suppose you have an iFrame

Code below will find your iFrame and insert the text specified into the body of the document

$(document).ready(function(){ 
    $('#frameID').load(function(){ 
        $('#frameID').contents().find('body').html('My new contents'); 
    }); 
}); 

How to access contents of an iFrame from JQuery

Suppose you have an iFrame

   <iframe id="iframeID" ...></iframe>

Your iFrame contains div with id=”myDiv”:

   <div id="myDiv">DIV contents here</div>

You can retrieve contents of a div using the following line of code:

   $('#iframeID').contents().find('#myDiv').html();