在iFrame中访问数据属性？

2024-05-01 • 问答

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

如何在iFrame中访问它？我有以下代码，但是我不确定它是否可以在iFrame中使用HTML。

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

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

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

我是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;
      }
    }

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

在iFrame中访问数据属性？

appyle 回答：在iFrame中访问数据属性？

大家都在问