如何从另一VisualForce页面触发当前页面的myevent事件

要实现当VFPage2执行Twilio Dial动词时触发VFPage1的myevent事件，核心是利用浏览器的postMessage API来完成iframe（VFPage2）与父页面（VFPage1）之间的跨页面通信。下面是具体的分步实现方案：

原来的VFPage2是返回XML格式的TwiML（给Twilio服务器的指令），如果要在用户交互层面触发事件，我们需要将其改为HTML页面，集成Twilio Client JS SDK来处理拨号操作，并在拨号时发送消息给父页面。

修改后的VFPage2代码：

<apex:page controller="MyTwiMLController" showHeader="false">
    <!-- 引入Twilio Client JS SDK -->
    <script src="https://sdk.twilio.com/js/client/v1.12/twilio.min.js"></script>
    <script>
        // 使用控制器生成的Twilio Token初始化客户端
        Twilio.Device.setup('{!twilioToken}');

        // 定义拨号函数
        function initiateDial() {
            // 配置拨号参数（替换为实际目标号码）
            const dialParams = { To: '+1234567890' };
            const connection = Twilio.Device.connect(dialParams);

            // 向父页面VFPage1发送'myevent'类型消息
            window.parent.postMessage(
                {
                    type: 'myevent',
                    payload: { action: 'dial_started', targetNumber: dialParams.To }
                },
                '*' // 生产环境请替换为VFPage1所在的具体Salesforce域名，比如https://your-instance.salesforce.com
            );

            // 可选：监听拨号接通事件，发送额外通知
            connection.on('connect', () => {
                window.parent.postMessage(
                    {
                        type: 'myevent',
                        payload: { action: 'dial_connected', targetNumber: dialParams.To }
                    },
                    '*'
                );
            });
        }
    </script>

    <!-- 示例拨号按钮，点击触发拨号逻辑 -->
    <button onclick="initiateDial()">Start Dial</button>
</apex:page>

我们需要在控制器中添加生成Twilio Client Token的方法，用于初始化Twilio客户端：

public class MyTwiMLController { 
    public MyTwiMLController() {} 

    // 生成Twilio Client Token（请替换为你的Twilio账户信息）
    public String getTwilioToken() {
        String accountSid = 'YOUR_TWILIO_ACCOUNT_SID';
        String authToken = 'YOUR_TWILIO_AUTH_TOKEN';
        String twilioAppSid = 'YOUR_TWILIO_APP_SID';

        Twilio.JWT.ClientToken clientToken = new Twilio.JWT.ClientToken.Builder(accountSid, authToken)
            .setApplicationSid(twilioAppSid)
            .build();
        
        return clientToken.toJwt();
    }

    // 保留原有的TwiML生成方法（用于Twilio webhook回调）
    public String getTwiml() { 
        TwilioTwiML.Response res = new TwilioTwiML.Response(); 
        res.append(new TwilioTwiML.Say('Hello, Monkey!')); 
        res.append( new TwilioTwiML.Play('http://demo.twilio.com/hellomonkey/monkey.mp3')); 
        res.append(new TwilioTwiML.Hangup()); 
        return res.toXML(); 
    } 
}

为了避免恶意消息，我们需要在VFPage1的监听函数中验证消息来源，同时保留原有事件处理逻辑：

<apex:page > 
    <style> 
        .hasMotif { margin : 0px; } 
    </style> 
    <apex:iframe src="https://mysamplewebpage" id="twilioIframe"></apex:iframe>
    <script> 
        function receiveMessage(event) { 
            // 生产环境务必验证消息来源，仅处理可信域名的消息
            const trustedOrigin = 'https://your-instance.salesforce.com';
            if (event.origin !== trustedOrigin) {
                return;
            }

            if(event.data.type === 'myevent') { 
                // 执行你的特定业务操作，比如更新页面UI、触发Apex方法等
                console.log('Received dial event:', event.data.payload);
                alert(`Dial ${event.data.payload.action}: ${event.data.payload.targetNumber}`);
            } 
        } 
        window.addEventListener("message", receiveMessage, false); 
    </script> 
</apex:page>

• 安全优先级：生产环境绝对不要用*作为postMessage的目标origin，一定要指定VFPage1所在的具体Salesforce实例域名，防止消息被恶意页面拦截。
• Twilio配置：请将控制器中的Twilio账户信息（Account SID、Auth Token、App SID）替换为你自己的实际信息，推荐将这些信息存储在Salesforce的Named Credential或Custom Setting中，避免硬编码敏感信息。
• 事件触发时机：根据业务需求，你可以监听Twilio Client的更多事件（比如disconnect拨号挂断），并发送对应的myevent消息。

内容的提问来源于stack exchange，提问作者Karthick Mohanraj