Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<p>The GetExternalFrameMessage function is used to retrieve data from an external iframe using the postMessage API. This function sends a message to the specified iframe and waits for a response, then stores the received data in the specified data key. It enables secure communication between the parent window and child iframe content.</p>
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
[
{
"Name": "frameID",
"Description": "The ID of the iframe element to communicate with",
"Types": [ "text", "mustache" ],
"Optional": false
},
{
"Name": "externalFunction",
"Description": "The tag or function name to be used in the message for identification purposes",
"Types": [ "text", "mustache" ],
"Optional": false
},
{
"Name": "dataKey",
"Description": "The data key where the response data will be stored",
"Types": [ "datakey" ],
"Optional": false
},
{
"Name": "isClone",
"Description": "Whether to clone the received data before storing it",
"Types": [ "boolean" ],
"Optional": true,
"DefaultValue": "false"
}
]
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<div d-dataKey="externalData" d-dataType="array"></div>
<div d-dataKey="responseMessage" d-dataType="value"></div>

<h3>GetExternalFrameMessage Example</h3>
<p>This example demonstrates how to get data from an external iframe using postMessage communication.</p>

<div style="margin: 10px 0;">
<input type="button" value="Get Data from Frame" d-on-click="GetExternalFrameMessage(sampleFrame,GetUserData,externalData,true)" />
<span d-model="{{responseMessage}}"></span>
</div>

<h4>Received Data:</h4>
<div d-for="item in externalData">
<div style="border: 1px solid #ccc; padding: 5px; margin: 2px;">
<strong>{{item.name}}</strong> - {{item.email}}
</div>
</div>

<h4>Sample iframe (simulated):</h4>
<iframe id="sampleFrame"
src="data:text/html,<html><body><script>
window.addEventListener('message', function(event) {
if (event.data && event.data.Action === 'get' && event.data.Tag === 'GetUserData') {
const sampleData = [
{name: 'John Doe', email: 'john@example.com'},
{name: 'Jane Smith', email: 'jane@example.com'}
];
event.source.postMessage({_data: sampleData}, '*');
}
});
</script>
<p>Sample iframe content - this would normally be an external page</p>
</body></html>"
style="width: 100%; height: 100px; border: 1px solid #ddd;"></iframe>
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<p>A sample that demonstrates GetExternalFrameMessage to retrieve data from an iframe. The example shows how to communicate with an external frame to get user data and store it in a data key.</p>