How to replace iframe to div ?

Question

Hi actually i am working on ajax in which i want to convert the iframe into div means that what is the functionality of iframe i want the same in div

Thanks.

Answer 1

You can't have the exact same functionality of an iframe in a simple div. That's why they have two different names. Iframe is a bit of sandboxing, and can open urls on any domain.

With Ajax on nowadays browsers you have to stick with the same-origin policy which means you can only load contents from the same domain your site operates on.

So, aside from this restriction and the fact that iframe-like sandboxing cannot be emulated in a div here, is a simple ajax solution with javascript, which you can use to achive a site navigation for instance:

HTML

<ul id="nav">
  <li><a href="page1.html">page1</a></li>
  <li><a href="page2.html">page2</a></li>
  <li><a href="page3.html">page3</a></li>
</ul>

Javascript

// select the menu element
var nav = document.getElementById("nav");

// watch for clicks on the menu
nav.onclick = function(e) {

  // get the element that was clicked
  e = e || window.event;
  var el = e.target || e.srcElement;

  // only act if it was a link
  if (el.nodeName == "A") {

    // making a call is as simple as this
    ajax(el.href, function(data) {

        // do something with the server's response
        // e.g.: put it to the #content element
        document.getElementById("content").innerHTML = data;
    });

    // prevent default action
    return false;
  }
};

///////////////////////////////////////////////////////////////////////////////

function getXmlHttpObject() {
    var xmlHttp;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        // Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    if (!xmlHttp) {
        alert("Your browser does not support AJAX!");
    }
    return xmlHttp;
}


function ajax(url, onSuccess, onError) {

    var xmlHttp = getXmlHttpObject();

    xmlHttp.onreadystatechange = function() {
        if (this.readyState === 4) {

            // onSuccess
            if (this.status === 200 && typeof onSuccess == 'function') {
                onSuccess(this.responseText);
            }

            // onError
            else if(typeof onError == 'function') {
                onError();
            }
        }
    };
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
    return xmlHttp;
}

​

Answer 2

@rajesh, You cannot load external webpages via Ajax unless you place a JavaScript file with Ajax calls on website where resides the content you would like to place on your website in Div. So the only way for you is to use Iframes.