Search code examples
jqueryhtmlwebdojo

how to embed external html file into current html file but without iframe tag


I need to open External website inside my current html file without iFrame

Help me..


Solution

  • Some alternative solutions to an iframe are:

    AJAX - You can use the XMLHttpRequest object to retrieve data and inject it to your page, for example inside a div. Example using jQuery:

     $( "#result" ).load( "ajax/test.html" );
    

    HTML5 Web Components - HTML Imports, part of the Web Components, allows to bundle HTML documents in other HTML documents. That includes HTML, CSS, JavaScript or anything else an .html file can contain. Example:

       <link rel="import" href="http://stackoverflow.com">
    

    Some other ideas are:

    <object> tag - It defines an embedded object within an HTML document. Can be used fot HTML file and multimedia content like audio, video, applets, ActiveX, PDF and Flash or other plugins).

       <object data="http://stackoverflow.com" width="400" height="300" type="text/html">
            Alternative Content
        </object>
    

    <embed> tag - It defines a container for an external application for example a plug-in, in can be also "hacked" and used to display an HTML page.

    <embed src="http://stackoverflow.com" width=200 height=200 />
    

    Regarding passing HEADER the best solution would be using an AJAX approach, here an example:

    $.ajax({
        url: "http://stackoverflow.com",
        data: { uname: "test" },
        type: "GET",
        beforeSend: function(xhr){xhr.setRequestHeader('X-TOKEN', 'xxxxx');},
        success: function() { alert('Success!' + authHeader); }
    });
    
    or in this way,
    
    $.ajax({
        url: "http://stackoverflow.com",
        data: { uname: "test" },
        type: "GET",
        headers:{ "X-TOKEN": 'xxxxx'},
        success: function() { alert('Success!' + authHeader); }
    });