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(ruleName[i]);
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][0].trim().replace(/\s/g, "_");
let selector = `div[${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:
- Checking whether the condition array in that object has length > 0.
- If true, iterating through the condition array and selecting the field using querySelector.
Note: The condition array is array of arrays. Example:
condition: [[ “Source”, “anotherValue”, “anotherValue”]]
I have also tried accessing the parent DOM using window.parent.document but it violates CORS policy.
Any help will be Appreciated.
Thanks