diff --git a/app/client/cypress/fixtures/IframeDsl.json b/app/client/cypress/fixtures/IframeDsl.json
new file mode 100644
index 0000000000..e104f3c0d0
--- /dev/null
+++ b/app/client/cypress/fixtures/IframeDsl.json
@@ -0,0 +1,114 @@
+{
+ "dsl": {
+ "widgetName": "MainContainer",
+ "backgroundColor": "none",
+ "rightColumn": 4896,
+ "snapColumns": 64,
+ "detachFromLayout": true,
+ "widgetId": "0",
+ "topRow": 0,
+ "bottomRow": 1290,
+ "containerStyle": "none",
+ "snapRows": 125,
+ "parentRowSpace": 1,
+ "type": "CANVAS_WIDGET",
+ "canExtend": true,
+ "version": 59,
+ "minHeight": 1292,
+ "dynamicTriggerPathList": [],
+ "parentColumnSpace": 1,
+ "dynamicBindingPathList": [],
+ "leftColumn": 0,
+ "children": [
+ {
+ "boxShadow": "{{appsmith.theme.boxShadow.appBoxShadow}}",
+ "widgetName": "Iframe1",
+ "srcDoc": "\n\n\n \n \n \n Document\n\n\n \n\n\n",
+ "displayName": "Iframe",
+ "iconSVG": "/static/media/icon.34169b6acebc8ace125dd1f638974aae.svg",
+ "searchTags": [
+ "embed"
+ ],
+ "topRow": 4,
+ "bottomRow": 36,
+ "parentRowSpace": 10,
+ "source": "https://www.example.com",
+ "type": "IFRAME_WIDGET",
+ "hideCard": false,
+ "borderOpacity": 100,
+ "animateLoading": true,
+ "parentColumnSpace": 17.34375,
+ "dynamicTriggerPathList": [],
+ "leftColumn": 5,
+ "dynamicBindingPathList": [
+ {
+ "key": "borderRadius"
+ },
+ {
+ "key": "boxShadow"
+ }
+ ],
+ "borderWidth": 1,
+ "key": "whutp42h3u",
+ "isDeprecated": false,
+ "rightColumn": 29,
+ "widgetId": "sh7n1r7qnb",
+ "isVisible": true,
+ "version": 1,
+ "parentId": "0",
+ "renderMode": "CANVAS",
+ "isLoading": false,
+ "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}"
+ },
+ {
+ "widgetName": "Text1",
+ "displayName": "Text",
+ "iconSVG": "/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg",
+ "searchTags": [
+ "typography",
+ "paragraph"
+ ],
+ "topRow": 4,
+ "bottomRow": 13,
+ "parentRowSpace": 10,
+ "type": "TEXT_WIDGET",
+ "hideCard": false,
+ "animateLoading": true,
+ "overflow": "NONE",
+ "fontFamily": "{{appsmith.theme.fontFamily.appFont}}",
+ "parentColumnSpace": 17.34375,
+ "dynamicTriggerPathList": [],
+ "leftColumn": 32,
+ "dynamicBindingPathList": [
+ {
+ "key": "fontFamily"
+ },
+ {
+ "key": "borderRadius"
+ },
+ {
+ "key": "text"
+ }
+ ],
+ "shouldTruncate": false,
+ "truncateButtonColor": "#FFC13D",
+ "text": "{{JSON.stringify(Iframe1.messageMetadata)}}",
+ "key": "lal01fm2pe",
+ "isDeprecated": false,
+ "rightColumn": 54,
+ "textAlign": "LEFT",
+ "widgetId": "vmttmnt61v",
+ "isVisible": true,
+ "fontStyle": "BOLD",
+ "textColor": "#231F20",
+ "version": 1,
+ "parentId": "0",
+ "renderMode": "CANVAS",
+ "isLoading": false,
+ "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
+ "fontSize": "1rem"
+ }
+ ]
+ }
+ }
+
\ No newline at end of file
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Iframe_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Iframe_spec.js
new file mode 100644
index 0000000000..6c087ce442
--- /dev/null
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Iframe_spec.js
@@ -0,0 +1,33 @@
+const dsl = require("../../../../fixtures/IframeDsl.json");
+
+describe("Iframe Widget functionality", function() {
+ before(() => {
+ cy.addDsl(dsl);
+ });
+
+ const getIframeBody = () => {
+ // get the iframe > document > body
+ // and retry until the body element is not empty
+ return (
+ cy
+ .get(".t--draggable-iframewidget iframe")
+ .its("0.contentDocument.body")
+ .should("not.be.empty")
+ // wraps "body" DOM element to allow
+ // chaining more Cypress commands, like ".find(...)"
+ // https://on.cypress.io/wrap
+ .then(cy.wrap)
+ );
+ };
+
+ it("Tests Iframe post message props correctly exposed or not", () => {
+ getIframeBody()
+ .find("button")
+ .should("have.text", "Click me")
+ .click();
+ cy.get(".t--draggable-textwidget .bp3-ui-text span").should(
+ "contain.text",
+ `{"lastEventId":"","origin":"https://dev.appsmith.com","ports":[]}`,
+ );
+ });
+});
diff --git a/app/client/src/utils/autocomplete/EntityDefinitions.ts b/app/client/src/utils/autocomplete/EntityDefinitions.ts
index 040bf7b62e..fa1ca54bb3 100644
--- a/app/client/src/utils/autocomplete/EntityDefinitions.ts
+++ b/app/client/src/utils/autocomplete/EntityDefinitions.ts
@@ -398,6 +398,7 @@ export const entityDefinitions = {
source: "string",
title: "string",
message: generateTypeDef(widget.message),
+ messageMetadata: generateTypeDef(widget.messageMetadata),
}),
DIVIDER_WIDGET: {
"!doc": "Divider is a simple UI widget used as a separator",
diff --git a/app/client/src/widgets/IframeWidget/widget/index.tsx b/app/client/src/widgets/IframeWidget/widget/index.tsx
index f21bf92091..1e2b6ae164 100644
--- a/app/client/src/widgets/IframeWidget/widget/index.tsx
+++ b/app/client/src/widgets/IframeWidget/widget/index.tsx
@@ -159,6 +159,7 @@ class IframeWidget extends BaseWidget {
static getMetaPropertiesMap(): Record {
return {
message: undefined,
+ messageMetadata: undefined,
};
}
@@ -186,8 +187,18 @@ class IframeWidget extends BaseWidget {
}
};
- handleMessageReceive = (event: MessageEvent) => {
- this.props.updateWidgetMetaProperty("message", event.data, {
+ handleMessageReceive = ({
+ data,
+ lastEventId,
+ origin,
+ ports,
+ }: MessageEvent) => {
+ this.props.updateWidgetMetaProperty("messageMetadata", {
+ lastEventId,
+ origin,
+ ports,
+ });
+ this.props.updateWidgetMetaProperty("message", data, {
triggerPropertyName: "onMessageReceived",
dynamicString: this.props.onMessageReceived,
event: {