URL이 아닌 IFRAME 소스로서의 HTML 코드
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>
html5 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), 50
W3Schools에 따르면 HTML 5에서는 새로운 "srcdoc"속성을 사용하여이를 수행 할 수 있지만 브라우저 지원은 매우 제한적입니다.
참고 URL : https://stackoverflow.com/questions/6102636/html-code-as-iframe-source-rather-than-a-url
'program tip' 카테고리의 다른 글
| Rails 모듈에서 mattr_accessor는 무엇입니까? (0) | 2020.08.13 |
|---|---|
| Java에서 따옴표를 이스케이프하지 않고 문자열 리터럴을 작성하는 방법이 있습니까? (0) | 2020.08.13 |
| 여러 필터 또는 여러 BroadcastReceiver가있는 BroadcastReceiver? (0) | 2020.08.13 |
| Jenkins에서 NUnit 테스트를 어떻게 실행합니까? (0) | 2020.08.12 |
| @Service 주석은 어디에 보관해야합니까? (0) | 2020.08.12 |