IFRAME에 대한이 표준 코드, src URL을 Just html 코드로 바꾸는 방법이 있습니까? 그래서 내 문제는 간단합니다. MYSQL에서 HTML 본문을로드하는 페이지가 있습니다. 해당 코드를 프레임에 표시하여 페이지의 나머지 부분과 해당 특정 경계의 경계에서 독립적으로 렌더링합니다.
<iframe src="http://example.com" name="test" height="120" width="600">You need a Frames Capable browser to view this content.</iframe> 답변:
데이터 URL로이를 수행 할 수 있습니다. 여기에는 HTML의 단일 문자열에 전체 문서가 포함됩니다. 예를 들어, 다음 HTML :
<html><body>foo</body></html>다음과 같이 인코딩 할 수 있습니다.
data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E그런 다음 srciframe 의 속성으로 설정 합니다. 예 .
편집 : 다른 대안은 Javascript로이를 수행하는 것입니다. 이것이 제가 선택한 기술입니다. 브라우저가 허용하는 데이터 URL의 기간을 보장 할 수 없습니다. Javascript 기술은 다음과 같습니다.
var iframe = document.getElementById('foo'),
iframedoc = iframe.contentDocument || iframe.contentWindow.document;
iframedoc.body.innerHTML = 'Hello world';편집 2 (2017 년 12 월) : 이제 수락 된 답변이어야하는 Saurabh Chandra Patel 의 답변 에서와 같이 Html5의 srcdoc 속성을 사용하십시오 ! IE / Edge를 효율적으로 감지 할 수 있는 경우 팁은 srcdoc-polyfill 라이브러리 만 사용하고 모든 비 IE / Edge 브라우저에서는 "pure"srcdoc 속성을 사용하는 것입니다 (확인하려면 caniuse.com 을 확인하세요).
<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>Blocked a frame with origin "http://localhost" from accessing a cross-origin frame합니다.
innerHTML브라우저 를 사용 하면 하위 스크립트 태그가 실행되지 않습니다. 자세한 내용 은 Element.innerHTML MDN 페이지의 보안 고려 사항 섹션 을 확인 하십시오.
사용 html5의 새로운 속성 srcdoc(srcdoc-polyfill을) 문서
<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>브라우저 지원-다음 브라우저에서 테스트되었습니다.
Microsoft Internet Explorer
6, 7, 8, 9, 10, 11
Microsoft Edge
13, 14
Safari
4, 5.0, 5.1 ,6, 6.2, 7.1, 8, 9.1, 10
Google Chrome
14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24.0.1312.5 (beta), 25.0.1364.5 (dev), 55
Opera
11.1, 11.5, 11.6, 12.10, 12.11 (beta) , 42
Mozilla FireFox
3.0, 3.6, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 (beta), 50W3Schools에 따르면 HTML 5에서는 새로운 "srcdoc"속성을 사용하여이를 수행 할 수 있지만 브라우저 지원은 매우 제한적입니다.