Question

我有一个VisualForce页面，其中包含以下代码：

VFPage1：

stack image container

我想在页面“https://mysamplewebpage”中发生特定操作时触发VFPage1中类型为'myevent'的事件。页面“https://mysamplewebpage”的后端源代码也是VisualForce脚本，如下所示：

VFPage2：https://mysamplewebpage

<apex:page >
    <style>
        .hasMotif {
            margin : 0px;
        }
    </style>
    <apex:iframe src="https://mysamplewebpage">
    <script>
        function receiveMessage(event) {
        if(event.data.type === 'myevent') {

         **Perform specific actions**

        } 
    }
    window.addEventListener("message", receiveMessage, false);
</script>
</apex:page>

简单来说，VFPage2是一个处理twilio来电的页面。现在，每当调用VFPage2中的“拨号”动词时，如何从VFPage2页面触发VFPage1中的事件'myevent'。 VFPage2的控制器如下所示：

MyTwiMLController：

<apex:page controller="TwiMLPage"
  showheader="false"
  contentType="text/xml"
  >{! '<?xml version=\"1.0\" encoding=\"UTF-8\"?>' }
{!twiml}
</apex:page>

Answer 1

您可以使用window.postMessage()在执行上下文（例如<iframe>和包含窗口）之间进行通信。在您的情况下，您需要向VFPage2添加脚本：

window.top.postMessage({ type: 'myevent' });

但请注意，此类通信受浏览器的同源政策约束;如果VFPage1和VFPage2是从不同的域提供的，则需要传递其他参数。你可以在这里阅读更多内容：

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

如何从另一个页面触发可视化强制页面中的事件

1 个答案: