Skip to main content

Hi,
I am making an app which runs in new ticket background. When I am trying to access the elements from the new ticket form, I am getting null value for the element as my app is in iframe and the elements I want to access are outside the iframe. Is there any way I can access the elements of the parent DOM inside an iframe without violating CORS policy?
My HTML code is(app/views/newTicket.html):

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src="{{{appclient}}}"></script>

    <title>New Ticket Background</title>

</head>

<body>

    <script src="./. ./scripts/newTicket.js"></script>

</body>

<script defer>

    document.onreadystatechange = function () {

        if (document.readyState === 'complete') init();

    };

    async function init() {

        var client;

        client = await app.initialized();

        await client.events.on('app.activated', async () => {

            await getRules(client);

        });

    }

</script>

</html>

And My JS Code is(app/scripts/newTicket.js):

async function getRules(client) {

    let { ruleName } = await client.db.get("New_Form");

    for (let i = 0; i < ruleName.length; i++) {

        let rule = await client.db.get(ruleNameli]);

        if (!rule.isOn) {

            continue

        }

        if (rule.condition.length > 0) {

            for (let j = 0; j < rule.condition.length; j++) {

                let attributeName = 'data-test-id';

                let attributeValue = rule.condition j]l0].trim().replace(/\s/g, "_");

                let selector = `divr${attributeName}="${attributeValue}" i]`;

                let conditionName = document.querySelector(selector); //It is giving null

                console.log(conditionName);

            }  

        }

    }

}

I am using localstore to save an object and then fetching it using the Id: “New_Form”. It contains “ruleName” array of all the object name which I have to use. Then I am iterating through all ruleName array, for each RuleName I am doing:

  1. Checking whether the condition array in that object has length > 0.
  2. If true, iterating through the condition array and selecting the field using querySelector.

Note: The condition array is array of arrays. Example:

condition:

I have also tried accessing the parent DOM using window.parent.document but it violates CORS policy.
Any help will be Appreciated.
Thanks

Join the Community or User Group to Participate in this Discussion

Reply