访问 iFrame 中的数据属性？答案

【问题标题】：Accessing data attribute within an iFrame?访问 iFrame 中的数据属性？
【发布时间】：2020-03-07 22:01:46
【问题描述】：

我正在使用 123FormBuilder，它会为您的网站添加一个 iFrame。我需要访问其中一个输入字段中的数据属性。

如何在 iFrame 中访问它？我有下面的代码，但我不确定它是否会工作，因为 HTML 在 iFrame 中。

document.querySelector([data-id=1203246]).value = clientId;

这是 123FormBuilder 的输入字段的代码，在 iFrame 中：

<div data-role="container" data-type="virtual-form-table-row" data-hash="00000019" data-type-id="0" data-colspan="20" data-num-children="1">
  <div data-role="control" data-type="text" data-hash="0000001a" data-type-id="23" data-colspan="20" data-renderer-type="tln" data-id="1203246" data-is-active="1">
    <label data-role="label" id="text-0000001a-acc" data-i18n-text="control_label_1203246">GA Hidden Field</label>
    <dt data-role="instructions" id="text-0000001a-instr-acc" data-is-empty="1" data-i18n-text="control_instructions_1203246"></dt>
    <div data-role="input-row" data-is-first-row="1" data-is-last-row="1" data-fill-colspan="0">
       <div data-role="input-container" data-ui-role="ui-element" data-size="full">
         <span data-role="prefix-label" id="price-0000001a-prefix-acc" style="opacity: 0.5;"></span>
         <input type="text" data-role="i123-input" data-no-theme="" aria-labelledby="text-0000001a-acc text-0000001a-error-acc text-0000001a-instr-acc" placeholder="" style="padding-left: 8px;">
       </div>
     </div>
   <label data-role="error" id="text-0000001a-error-acc" data-is-empty="1"></label>
 </div>

【问题讨论】：

请阅读stackoverflow.com/questions/37550772/iframe-security-and-cors
所以不可能？谢谢。
显然不可能，iframe 内容在另一个域中。

标签： javascript html forms iframe

【解决方案1】：

我是 123FormBuilder 的开发人员 Alexandru Berce。如果我的理解是正确的，您正在尝试为表单字段动态设置值。

document.querySelector([data-id=1203246]).value = clientId;

无法直接在 iframe 中执行代码，但您可以通过发布消息来实现。为此，您需要在 123FormBuilder 中的表单中添加 JS 脚本。

转到设置 -> 高级 -> 表单并在那里添加脚本

这里是文档：https://www.123formbuilder.com/docs/can-i-add-a-custom-js-script-to-my-form/

此功能从白金计划开始提供。

我会在这里留下一个例子：

您的网站：

<html>
<body>

    <button onClick="setFieldValueInIframe(57728543, '123')">Set field value</button>

    <!-- www.123formbuilder.com script begins here -->
    <script
      type="text/javascript"
      defer
      src="https://www.123formbuilder.com/embed/5089685.js"
      data-role="form"
      data-default-width="936px"
    ></script>
    <!-- www.123formbuilder.com script ends here -->

</body>
<script>
    function setFieldValueInIframe(fieldId, fieldValue){
        const data = {
            action: 'setFieldValue',
            fieldId: fieldId,
            fieldValue: fieldValue
        };

        sendMessage(data, "*");
    }

    function sendMessage(messageData){
        const iframe = document.getElementsByTagName('iframe')[0];

        iframe.contentWindow.postMessage(messageData, "*");
    }

</script>

单击按钮时，它会向 iframe 发送一条发布消息，其中包含您尝试执行的操作。在 iframe 方面，您有一个事件侦听器，它将捕获所有消息，您可以对消息执行任何您想要的操作（在这种情况下设置字段的值）。

我在https://alexberce.github.io/client-scripts/set-field-value.js 托管了脚本，因此您可以根据需要在其他表单上尝试。

表单上的脚本：

if (window.addEventListener) {
      window.addEventListener("message", receiveMessage, false);
    } else if (window.attachEvent) {
      window.attachEvent("onmessage", receiveMessage);
    }

    function receiveMessage(event) {
      const { action } = event.data;
      const messageData = event.data;

      switch (action) {
        case "setFieldValue":
          const fieldId = String(messageData.fieldId),
            fieldValue = messageData.fieldValue;

          window.loader
            .getDOMAbstractionLayer()
            .setControlValueById(fieldId, fieldValue);
          break;

        default:
          console.warn("Action not implemented");
          break;
      }
    }

【讨论】：

谢谢亚历山德鲁！我会试一试:)

【解决方案2】：

@Andrew 是正确的，iframe 的行为类似于单向窗口。无法通过 iframe 从呈现 iframe 的网站检索任何数据。

【讨论】：