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

Question

我想请您注意我的问题，主题应该与此类似post。

在 WP 网站中，我有两列：

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

第 n.2 列有一个用于使用外部日历工具进行约会的 iframe，它应该从表单中选取数据（我无法编辑表单，但只能编辑 iframe link，例如:

是否有可能 link 到 "pick" 来自表单或 crm url 的数据？你觉得这可行还是我傻？

非常感谢您的帮助:)

Answer 1

您应该考虑使用 JavaScript postMessage() 功能来传递数据 to/from iFrame。

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);

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

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

Autofill an external form in an iframe from... another form

forms

wordpress

autofill

contact-form-7