lightview
Version:
Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.
50 lines (46 loc) • 1.87 kB
HTML
<head>
<title>Remote</title>
<link type="module" src="">
<meta name="l-enableFrames">
<script src="../../lightview.js"></script>
</head>
<body>
<p>
The component below is loaded from an alternate domain and running in a child iframe.
The logging console is below the component in this frame.
</p>
<p>New Order:<span id="orderclip"></span></p>
<iframe id="myframe"
class="l-remote" style="border-width:2px;border-style:dashed;"
src="https://lightview.dev/examples/foreignform.html?id=myframe"></iframe>
<div id="console" style="max-height:250px;scroll:auto"></div>
<script>
const iframe = document.getElementById("myframe");
iframe.addEventListener("DOMContentLoaded",(event) => {
// modify the line below, or remove this event listener
// based on the needs of your application
console.log(event);
});
iframe.addEventListener("message",({detail}) => {
// modify the lines below, or remove this event listener
// based on the needs of your application
const orderclip = document.getElementById("orderclip");
orderclip.innerText = JSON.stringify(detail);
});
iframe.addEventListener("attribute.changed",(event) => {
const {target,detail} = event,
{attributeName,value,oldValue} = detail;
event.stopImmediatePropagation();
if(target.getAttribute(attributeName)!==oldValue) {
// modify the lines below, or remove this event listener
// based on the needs of your application
const console = document.getElementById("console"),
line = document.createElement("div");
line.innerText = JSON.stringify(detail);
console.appendChild(line);
}
});
</script>
</body>
</html>