Accessing data attribute within an iFrame?

Question

I'm working with 123FormBuilder, which adds an iFrame to your website. I need to access a data attribute within one of the input fields.

How would I access this within the iFrame? I have the below code, but I'm not sure it'll work as the HTML is in an iFrame.

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

This is the code for the input field of 123FormBuilder, within an 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>

Please read stackoverflow.com/questions/37550772/iframe-security-and-cors — Andrew
– Andrew, Commented Nov 12, 2019 at 8:19
It is clearly not possible, the iframe contents are on another domain. — Andrew
– Andrew, Commented Nov 12, 2019 at 8:27

Alexandru Berce · Accepted Answer · 2019-11-12 17:42:44Z

I'm Alexandru Berce, a developer at 123FormBuilder. If my understanding is correct you're trying to dynamically set a value for a form field.

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

It is not possible to execute code directly in the iframe but you can achieve this with post messages. You'll need to add JS script to your form in 123FormBuilder for this.

Go to Settings -> Advanced -> Form and add the script there

Here is the documentation: https://www.123formbuilder.com/docs/can-i-add-a-custom-js-script-to-my-form/

This feature is available starting with the Platinum plan.

I'll leave an example here:

Your website:

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

When the button is clicked it sends a post message to the iframe with the action you're trying to execute. On the iframe side you have an event listener which will catch all messages and you can execute any action you want for the message (setting the value for a field in this case).

I hosted the script at https://alexberce.github.io/client-scripts/set-field-value.js so you can try it on other forms if you want.

Script on the form:

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

Nadeem Paulus · Accepted Answer · 2019-11-12 09:08:30Z

1

@Andrew is correct, an iframe in behaviour is akin to a one way window. No data can be retrieved via the iframe from the website rendering the iframe.

answered Nov 12, 2019 at 9:08

Nadeem Paulus

414 bronze badges

Comments

pr0v0k3r · Accepted Answer · 2023-01-31 15:24:51Z

Here is how you can pass data from the main page into the form within the iFrame.

You can create the iFrame using JavaScript, and pass the data into a form field by setting the URL as shown, where the control######### would be the data-id attribute of the input.

let dataToPassIn = "Testing!";
let inputId = "102942776";
let baseIFrameUrl = "https://form.123formbuilder.com/3253754"
let completeUrl= `${baseIFrameUrl}&control${inputId}=${dataToPassIn}`;

$(`
    <iframe
        allowTransparency="true"
        width="100%"
        marginwidth="0"
        marginheight="0"
        frameborder="0"
        src="${completeUrl}">
    </iframe>
`).appendTo(".example-container")

Of course, once the iFrame is created, you can no longer access those fields. It's a one-way train.

Collectives™ on Stack Overflow

Accessing data attribute within an iFrame?

3 Answers 3

1 Comment

Comments

Here is how you can pass data from the main page into the form within the iFrame.

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Here is how you can pass data from the main page into the form within the iFrame.

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related