То, что вы пытаетесь сделать (судя по обновлению и добавленным примерам кода), - это извлечь контент с другого сервера с помощью JavaScript.
Однако вы не сможете просто извлечь страницу, как если бы она была загружена браузером. Вы собираетесь получить данные - это означает HTML. Затем вы присоединяете его к DOM (к дереву элементов вашего документа) без стилей. Для получения данных с другого сервера вам действительно нужен прокси. Существует также новый Ajax, CORS - вы можете прочитать об этом, если вы установите специальный заголовок на стороне сервера, он позволит вам получать данные с этого сервера с помощью AJAX без прокси-сервера, поэтому, если у вас есть контроль через сервер это может быть путь.
Вы можете использовать iframe и просто установить его атрибут src
на то, что вы хотите. Таким образом вы сохраните свои стили: http://jsfiddle.net/D55ny/
UPD.
Я думаю, у вас неправильное представление о том, как стили применяются к странице. Когда вы извлекаете содержимое с помощью JavaScript, вы фактически добавляете новую разметку на страницу с тем же .
Разметка и стили - это две разные вещи, и вы не просто извлекаете их вместе (если это не iframe, но вы не хотите использовать это).
Вы можете получить содержимое (с помощью любого из параметров, AJAX через прокси-сервер, CORS или JSONP), а затем применить CSS, выбрав его тоже с чем-то вроде этого (используя jQuery):
var link = $("<link>");
link.attr({
rel: 'stylesheet'
, href: 'path/to/your.css' // <-- change this to your path
});
$("head").append( link );
Но учтите, что стили родительского сайта будут применяться к новой разметке. Таким образом, вам нужно инкапсулировать вашу презентацию с классами и не использовать селекторы типа (такие как h1, p, li
и т. Д.), Вы можете прочитать о модульном инкапсулированном CSS в книге Джонатана Снука SMACSS , посмотрите эту презентацию Об объектно-ориентированном CSS Николь Салливан или читайте об интересном подходе, который используется Яндексом и который решает те же проблемы модульности и инкапсуляции в здесь (BEM)
UPD.2
Краткий ответ на ваш вопрос:
Вы не можете получить данные с помощью AJAX, CORS или JSONP и применить CSS и JavaScript. Вот также часть из загрузочных документов jQuery:
jQuery использует свойство браузера .innerHTML
для анализа полученного
документ и вставить его в текущий документ. Во время этого процесса
браузеры часто фильтруют элементы из документа, такие как <html>
,
<title>
или <head>
элементов. В результате элементы, полученные
.load()
может быть не таким, как если бы документ был извлечен
непосредственно браузером.