Как показать внешний сайт внутри другой страницы без iFrame?

Question

Мне нужно открыть внешний сайт внутри моего приложения без iFrame также мне нужно передать некоторые значения заголовков на этот внешний веб-сайт.

Помощь мне ..

Answer 1

Некоторые альтернативные решения в IFRAME являются:

AJAX - Вы можете использовать объект XMLHttpRequest для извлечения данных и введите его на свою страницу, например, внутри div. Пример использования JQuery:

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

Web Components HTML5 - HTML Импорт, часть веб-компонентов, позволяет объединять HTML документы в других HTML-документов. Это включает HTML, CSS, JavaScript или что-то еще, что может содержать файл .html. Пример:

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

Некоторые другие идеи:

<object> тег - Определяет встроенный объект внутри HTML-документа. Может использоваться для файлов HTML и мультимедийного контента, таких как аудио, видео, апплеты, ActiveX, PDF и Flash или другие плагины).

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

<embed> Тег - это определяет контейнер для наружного применения, например, подключаемый модуль, в также может быть «взломан» и используется, чтобы отобразить страницу HTML.

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

Что касается прохождения HEADER лучшим решением будет использовать подход AJAX, здесь пример:

$.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); } 
}); 

Answer 2

вы можете попробовать это:

<div> 
    <object type="text/html" data="http://validator.w3.org/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue"> 
    </object> 
</div>