1. Iframe
Let’s dig into the HTML iframe, the old thing that is very powerful!
<iframe> is used to embed another document within the current HTML document. You should pay attention to some attribute as:
- allowfullscreen (bolean)
- loading (eager/lazy)
- src
- width and height
- referrerpolicy
So, why do I write a post about this HTML tag? As I said, this tag is very powerful. In most cases, you guy may need to embed content from another website, that’s the cross-origin case. We may see PayPal render their checkout widget from another origin on the shop website, or the most basic case is youtube iframe embed in millions of website.
But sometimes, you also will need to create your own iframe on the same origin/same website.
In two cases, we have to access the parent content (parent page) by scripting, what are we gonna do?
2. Same-origin iframe
Consider a scenario that forces you to use a same-origin iframe instead of directly writing HTML content on the page:
The payment method of your company using javascript to render HTML form, the problem is the checkout page that you are trying to show payment form also using the form tag to wrap payment method content. Form can’t be nested. So you may think about an iframe to render a payment form.
// iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe</title>
</head>
<body>
<h3>This is parent title</h3>
<h4>Section below is iframe content:</h4>
<div onclick="actionToParent()">Check payment method</div>
<script>
function actionToParent() {
parent.checkedMethodEvent({'name': 'ThePayment'})
}
</script>
</body>
</html>Call parent script method:
parent.checkedMethodEvent(data);
// parent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="/iframe.html" frameborder="0"></iframe>
<script>
window.checkedMethodEvent = function(data) {
console.log(data);
}
</script>
</body>
</html>
The result after clicked to the div inside frame: action call to parent and execute parent script function:
3. Cross-origin iframe
Cross origin iframe is quite different, since we can’t directly call parent method. But, I want to mention a bout postMessage() API in javascript. This method is really helpful; when you want to communicate cross origin via Js.
document.getElementById('cross_domain_page').contentWindow.postMessage(.......)window.addEventListener("message", (event) => {
if (event.origin !== "http://example.org:8080")
return;
// ...
}, false);This API also very useful in case we use popup then want to communicate with the original page:
let popup = window.open(/* popup details */);
popup.postMessage("hello there!", "http://example.com");
window.addEventListener("message", (event) => {
if (event.origin !== "http://example.com")
return;
}, false);4. Conclusion
Vanila Javascript is really a very powerful language, the number of JS API increasing every year and the community is excellent. Hope you guy can become a master of this language.