Iframes
In this tutorial you'll learn how to use the iframe
VM tag and the Iframe resizer library, so you can embed external HTML or use custom DOM elements when building NEAR components.
승인된 나머지 VM 태그와 함께 이 태그를 사용하여 컴포넌트 개발을 간소화할 수 있습니다.
Using IFrames on NEAR VM
Iframes는 외부 HTML을 포함하거나 사용자 정의 DOM 요소를 사용하는 데 쓰일 수 있습니다(예: canvas
).
속성
iframe
태그는 다음 속성을 사용합니다: className
, style
, src
, srcDoc
, title
, message
및 onMessage
. iframe은 스크립트만을 허용하도록 sandbox="allow-scripts"
로 설정된 샌드박스 속성을 가지고 있습니다.
정보
message
및 onMessage
는 이 iframe 인스턴스와 통신하는 데에 사용됩니다.
param | 설명 |
---|---|
message | deep equal이 다르거나 iframe이 다시 생성될 때마다 iframe에 전달됩니다. 이 메시지는 iframe에서 contentWindow.postMessage(message, "*") 를 사용하여 전달됩니다. |
onMessage(data) | iframe이 메시지를 window.top 으로 전달할 때 호출됩니다. event.data 만 onMessage 로 전달됩 니다. |
이벤트
VM에서 다음 <iframe>
이벤트를 표시합니다:
-
onLoad()
: 이벤트 정보 없이onLoad
이벤트를 지원합니다.<iframe onLoad={() => { console.log('iframe loaded') }}>
-
새
width
와height
만 포함하는 객체가 있는 Iframe Resizer 이벤트입니다.<iframe iframeResizer={{
onResized: ({width, height}) => { console.log('iframe resized', width, height) },
}}>
예시
다음 예시는 eval
을 호출하는 iframe을 사용하는 방법을 설명합니다.
State.init({
text: `"b" + "a" + +"a" + "a"`,
});
const code = `
<div>Expression: <pre id="exp" /></div>
<div>Results: <pre id="res" /></div>
<script>
window.top.postMessage("loaded", "*");
window.addEventListener("message", (event) => {
const data = event.data
document.getElementById("exp").innerHTML = JSON.stringify(data);
try {
const result = eval(data.exp);
document.getElementById("res").innerHTML = result;
event.source.postMessage(result, "*");
} catch (e) {
// ignore
}
}, false);
</script>
`;
return (
<div>
<input
value={state.text || ""}
onChange={(e) => State.update({ text: e.target.value })}
/>
Iframes below
<div className="d-flex">
<iframe
className="w-50 border"
srcDoc={code}
message={{ exp: state.text || "" }}
onMessage={(res1) => State.update({ res1 })}
/>
<iframe
className="w-50 border"
srcDoc={code}
message={{ exp: (state.text || "") + " + ' banana'" }}
onMessage={(res2) => State.update({ res2 })}
/>
</div>
Result:{" "}
<pre>
res1 = {JSON.stringify(state.res1)}
res2 = {JSON.stringify(state.res2)}
</pre>
</div>
);