답변:
기본적으로 HTML을 웹 페이지에 포함시키는 4 가지 방법이 있습니다.
<iframe>iframe의 콘텐츠는 전적으로 귀하의 페이지와 별도의 컨텍스트에 있습니다. 이 기능은 대부분 훌륭한 기능이며 브라우저 버전간에 가장 호환되지만 추가 과제가 발생합니다 (프레임 크기를 내용에 맞게 축소하는 것은 어렵고 스크립트를 작성하는 데 매우 실망스럽고 스타일 지정이 거의 불가능합니다).XMLHttpRequest객체를 사용하여 데이터를 검색하여 페이지에 삽입 할 수 있습니다. 스크립팅 기술에 의존하므로 다른 단점 중에서도 실행 속도가 느리고 복잡해지기 때문에 이상적이지 않습니다 .HTML5 웹 구성 요소 . 웹 구성 요소의 일부인 HTML 가져 오기를 사용하면 HTML 문서를 다른 HTML 문서에 묶을 수 있습니다. 즉 포함 HTML, CSS, JavaScript또는 다른 어떤 .html파일을 포함 할 수 있습니다. 따라서 여러 가지 재미있는 사용 사례가있는 훌륭한 솔루션입니다. 앱을 번들 구성 요소로 배포 할 수있는 번들 구성 요소로 분할하고, 중복성을 피하기 위해 종속성을보다 효과적으로 관리하고, 코드 구성 등을 수행 할 수 있습니다. 다음은 간단한 예입니다.
<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">기본 호환성 은 여전히 문제이지만 polyfill 을 사용하여 오늘날에도 상쾌한 브라우저 에서 작동하도록 할 수 있습니다 .
다음과 같이 object 및 embed를 사용할 수 있습니다.
<object data="http://www.web-source.net" width="600" height="400">
<embed src="http://www.web-source.net" width="600" height="400"> </embed>
Error: Embedded data could not be displayed.
</object>새로운 것이 아니지만 여전히 작동합니다. 그래도 동일한 기능을 가지고 있는지 확실하지 않습니다.
아니요, 이에 상응하는 것은 없습니다. <iframe>요소는 여전히 HTML5에서 유효합니다. 필요한 정확한 상호 작용에 따라 다른 API가있을 수 있습니다. 예를 들어 postMessage교차 도메인 자바 스크립트 상호 작용을 달성 할 수 있는 방법이 있습니다. 그러나 CSS로 스타일을 지정하고 javascript와 대화식으로 만든 크로스 도메인 HTML 내용을 표시하려는 경우 iframe좋은 방법으로 유지됩니다.
object HTML5의 쉬운 대안입니다.
<object data="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width="400" height="300" type="text/html">
Alternative Content
</object>당신은 또한 시도 할 수 있습니다 embed:
<embed src="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width=200 height=200 onerror="alert('URL invalid !!');" />이를 수행하고 기본 페이지 또는 컨텐츠가 제공되는 서버를 제어하려는 경우 Cross Origin Resource Sharing ( http://www.w3.org/TR/access-control/ )을 사용하여 클라이언트- <div>via 로 데이터를로드하는 side JavaScript XMLHttpRequest():
// I safely ignore IE 6 and 5 (!) users
// because I do not wish to proliferate
// broken software that will hurt other
// users of the internet, which is what
// you're doing when you write anything
// for old version of IE (5/6)
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
document.getElementById('displayDiv').innerHTML = xhr.responseText;
}
};
xhr.open('GET', 'http://api.google.com/thing?request=data', true);
xhr.send();이제이 전체 작업을 시작 Access-Control-Allow-Origin하려면 클라이언트 측 코드를 통해 액세스 할 수있는 도메인을 지정하여 클라이언트에 헤더 를 제공하는 서버용 코드를 작성해야합니다 XMLHttpRequest(). 다음은 이러한 헤더를 클라이언트에게 보내기 위해 페이지 상단에 포함 할 수있는 PHP 코드의 예입니다.
<?php
header('Access-Control-Allow-Origin: http://api.google.com');
header('Access-Control-Allow-Origin: http://some.example.com');
?>W3C는 "외부 (일반적으로 HTML이 아닌) 응용 프로그램 또는 대화 형 콘텐츠 용"이 아니라고 명시하지만이 방법도 효과가있는 것 같습니다.
<embed src="http://www.somesite.com" width=200 height=200 />추가 정보 : http://www.w3.org/wiki/HTML/Elements/embed http://www.w3schools.com/tags/tag_embed.asp
도메인 간 시각적 콘텐츠를 다운로드하는 가장 좋은 방법은 iframe입니다. AJAX를 사용하면 웹 페이지에서 HTML을 다운로드하여 div에 넣을 수 있지만 (다른 사람들이 언급했듯이) 더 큰 문제는 보안입니다. iframe을 사용하면 교차 도메인 컨텐츠를로드 할 수 있지만 컨텐츠가 실제로 귀하의 소유가 아니기 때문에 조작 할 수 없습니다. 반면에 AJAX를 사용하면 다운로드 할 수있는 모든 컨텐츠를 조작 할 수 있지만 다른 도메인의 서버는 다운로드 할 수있는 방식으로 설정해야합니다. 많은 경우 다른 도메인의 구성에 액세스 할 수 없으며, 그렇게해도 항상 이러한 종류의 구성을 수행하지 않으면 두통이 될 수 있습니다. 이 경우 iframe이 훨씬 쉬운 대안이 될 수 있습니다.
다른 사람들이 언급했듯이 embed 태그와 object 태그를 사용할 수도 있지만 반드시 iframe보다 고급이거나 새로운 것은 아닙니다.
HTML5는 교차 도메인으로부터 정보를 얻기 위해 웹 API를 채택하는 방향으로 향했습니다. 일반적으로 웹 API는 HTML이 아닌 데이터를 반환합니다.
nice-to-know
XMLHttpRequest를 사용하여 페이지를 div (또는 실제로 페이지의 다른 요소)에로드 할 수 있습니다. 예를 들어 함수는 다음과 같습니다.
function loadPage(){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("ID OF ELEMENT YOU WANT TO LOAD PAGE IN").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","WEBPAGE YOU WANT TO LOAD",true);
xmlhttp.send();
}서버가 가능하다면 PHP를 사용하여이를 수행 할 수도 있지만 HTML5 메소드를 요청하기 때문에 필요한 모든 것입니다.
이 문제를 해결하기 위해 node-iframe-replacement 노드 모듈을 만들었습니다 . 부모 사이트와 CSS 선택기의 소스 URL을 제공하여 컨텐츠를 주입하면 두 사이트가 병합됩니다.
상위 사이트에 대한 변경 사항은 5 분마다 수집됩니다.
var iframeReplacement = require('node-iframe-replacement');
// add iframe replacement to express as middleware (adds res.merge method)
app.use(iframeReplacement);
// create a regular express route
app.get('/', function(req, res){
// respond to this request with our fake-news content embedded within the BBC News home page
res.merge('fake-news', {
// external url to fetch
sourceUrl: 'http://www.bbc.co.uk/news',
// css selector to inject our content into
sourcePlaceholder: 'div[data-entityid="container-top-stories#1"]',
// pass a function here to intercept the source html prior to merging
transform: null
});
});JSON-P를 살펴 봐야합니다.이 문제가 발생했을 때 완벽한 솔루션이었습니다.
https://ko.wikipedia.org/wiki/JSONP
기본적으로 모든 데이터를로드하는 자바 스크립트 파일과이를 처리하고 표시하는 다른 자바 스크립트 파일을 정의합니다. 그것은 iframe의 추악한 스크롤 막대를 제거합니다.