Have you ever wanted to send a message from an iFrame to its parent window and then reload a second iFrame using Google Apps Script WebApp? It might seem like a complex task, but it's actually quite simple. In this article, we'll walk you through the steps to accomplish this task, even if you're an entry-level user.
Prerequisites
Before we begin, there are a few things you need to have in place. First, you'll need to create a Google Apps Script WebApp. This is a script that runs on Google's servers and can be accessed from any web page. You can create a new WebApp by going to script.google.com and creating a new project. Once you have created your WebApp, you'll need to deploy it as a web app. You can do this by going to the "Publish" menu and selecting "Deploy as web app". You'll then need to give your WebApp a name and set the access level to "Anyone, even anonymous".
Once you have your WebApp set up, you'll need to create two iFrames. One iFrame will be used to send a message to the parent window, and the other iFrame will be reloaded based on the message. You can create iFrames by using the <iframe> tag in your HTML. For example:
<iframe id="iframe1" src="https://your-web-app-url" width="500" height="500"></iframe>
<iframe id="iframe2" src="https://your-second-web-app-url" width="500" height="500"></iframe>Sending a Message from an iFrame to the Parent Window
Now that you have your WebApp set up and your iFrames created, it's time to send a message from the first iFrame to the parent window. To do this, you'll need to use the postMessage() method. This method allows you to send a message from one window to another window, even if the windows are from different origins. Here's an example of how to use the postMessage() method:
window.parent.postMessage("Hello, parent window!", "*");In this example, we're sending the message "Hello, parent window!" to the parent window. We're also using the "*" wildcard to indicate that the message can be received by any window. You can replace "Hello, parent window!" with any message you want to send. Once you have your message, you can add the postMessage() method to your iFrame like this:
<iframe id="iframe1" src="https://your-web-app-url" width="500" height="500" onload="sendMessage()"></iframe>In this example, we're calling the sendMessage() function when the iFrame has finished loading. This function will contain the postMessage() method that we looked at earlier. Here's an example of what the sendMessage() function might look like:
function sendMessage() {
window.parent.postMessage("Hello, parent window!", "*");
}Reloading a Second iFrame Based on the Message
Now that we have sent a message from the first iFrame to the parent window, it's time to reload the second iFrame based on the message. To do this, we'll need to listen for the message in the parent window and then reload the second iFrame when the message is received. Here's an example of how to listen for the message:
window.addEventListener("message", function(event) {
if (event.data === "Hello, parent window!") {
// Reload the second iFrame
document.getElementById("iframe2").src = "https://your-second-web-app-url";
}
});In this example, we're listening for a message with the data "Hello, parent window!". When this message is received, we're reloading the second iFrame by setting its src attribute to the URL of the second WebApp. You can replace "Hello, parent window!" with any message you sent from the first iFrame. Once you have your message, you can add the event listener to the parent window like this:
<body onload="init()">
...
</body>
In this article, we've shown you how to send a message from an iFrame to the parent window and then reload a second iFrame based on the message using Google Apps Script WebApp. This is a powerful technique that can be used to communicate between iFrames and the parent window, and it's easy to implement even if you're an entry-level user. So go ahead and give it a try!
References
| Title | URL |
|---|---|
| Google Apps Script WebApp | https://developers.google.com/apps-script/guides/web |
| postMessage() method | https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage |