我正在使用 123FormBuilder，它将 iFrame 添加到您的网站。我需要访问输入字段之一内的数据属性。
我如何在 iFrame 中访问它？我有以下代码，但我不确定它是否有效，因为 HTML 位于 iFrame 中。
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>
最佳答案
我是 Alexandru Berce，123FormBuilder 的开发人员。 如果我的理解是正确的，您正在尝试动态设置表单字段的值。
document.querySelector([data-id=1203246]).value = clientId;
无法直接在 iframe 中执行代码，但可以通过发布消息来实现此目的。为此，您需要将 JS 脚本添加到 123FormBuilder 中的表单中。
转到设置 -> 高级 -> 表单并在其中添加脚本
这里是文档: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;
}
}
关于javascript - 访问 iFrame 中的数据属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58814529/