自动填充 iframe 中的外部表单来自...另一个表单

Posted 2023-02-24

【中文标题】自动填充 iframe 中的外部表单来自...另一个表单

【英文标题】：Autofill an external form in an iframe from... another form

【发布时间】：2017-03-07 18:49:39

【问题描述】：

我想请您注意我的问题，主题应该与这篇文章相似。

在 WP 网站中，我有两列：

第 n.1 列有一个 CF7 表单，该表单由 CRM 中的 URL 自动填充，并将数据注入 GSheet。

列 n.2 有一个 iframe 用于使用外部日历工具进行预约，该工具应从表单中选择数据（我无法编辑表单，只能编辑 iframe 链接，例如：

此链接是否有可能从表单或 crm url 中“挑选”数据？你认为这是可能的还是我是个傻瓜？

非常感谢您的帮助:)

【参考方案1】：

您应该考虑使用 javascripts postMessage() 功能向 iFrames 传递数据/从 iFrames 传递数据。

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

在 WordPress 页面上使用类似的东西

// This will get the value of the input and send it to the iFrame on the fly
$('#form-id input:not([type=submit])').each(function()  
    var val = $(this).val();
    $(window).postMessage(val);
);

然后在 iFrame 页面上：

// Create browser compatible event handler.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen for a message from the WP page
eventer(messageEvent, function(e) 
    if (e.data.length < 1) return;

    // jQuery
    $('#input-id').val(e.data);

    // Pure JS
    document.getElementById('input-id').setAttribute('value', e.data); 
, false);

如果我认为不同域上的表单这是唯一的方法。