Support Article
Unable to invoke or send data from iFrame to a section
Summary
Unable to invoke a function from an external JavaServer Pages (JSP) that is loaded to the iFrame.
Error Messages
unable to send the message from html/jsp page to section using window.postmessage or parent.postmessage
Steps to Reproduce
- Create a section with a non auto generated HTML section.
- Create an HTML or JSP page with button onClick defined to send data.
- On the section, receive the message and display in an input field.
Root Cause
An issue in the custom application code or rules.
There was no directional communication between the parent HTML Document Object Model (DOM) and the iFrame (in the same DOM) in the cross origin.
Resolution
Perform the following local-change:
Include the below code to communicate: External HTML or JSP page:
<head>
<script>
function sendMessageToParent(){
var nameEle = document.getElementById("Name");
var nameValue = nameEle.value;
var parentWin = window.parent;
parentWin.postMessage(nameValue, "*");
}
function recieveMessageFromParent(event){
document.getElementById("Name").value = event.data;
}
window.addEventListener("message", recieveMessageFromParent, false);
</script>
</head>
<body>
<form action="">
Name:<br>
<input type="text" id= "Name" name="firstname" value="Pega"><br>
Last name:<br>
<input type="text" name="lastname" value="Systems"><br><br>
<button type="button" onclick="sendMessageToParent();">Post Message To Parent</button><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
Pega section:
<div>
<script>
function sendMessageToChild(){
var nameEle = document.querySelector("input[name='$PpyDisplayHarness$pName']"); //In case of portal
var nameEle = document.querySelector("input[name='$PpyWorkPage$pName']"); //In case of portal
var nameValue = nameEle.value;
var iframeWin = document.getElementById("customframe").contentWindow;
iframeWin.postMessage(nameValue, "*");
}
function recieveMessageFromChild(event){
document.querySelector("input[name='$PpyDisplayHarness$pName']").value = event.data; // In case of Case flow document.querySelector("input[name='$PpyWorkPage$pName']").value = event.data;// In case of Case flow
}
window.addEventListener("message", recieveMessageFromChild, false);
</script>
<iframe id="customframe" name="customframe" style="border-color:red;" src="http://localhost:8085/MW_mashup/Jana.html">
</iframe>
</div>
Published January 6, 2019 - Updated December 2, 2021
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.