How can I edit html inside an iframe using javascript

Question

I am working on automating a process within my business, part of which is sending an email through SalesForce. We don't have access to the SF API and the email has to be sent through salesforce in order to keep the communication searchable for the coworkers.

I need to use a template which can be selected in SalesForce, however this function does not work in IE (which our RPA solution uses) so I need to build this email from scratch.

I see two options for this:

1. Use the HTML to recreate the format with the right variables. This entails inserting/injecting/manipulating HTML.
2. Copy the format into memory/the clipboard, edit it programatically and paste it into the SF interface

This question will be about option 1. I will post an additional question with regards to the second option separately and edit this question to include that link. EDIT: Here is the link to the other question!

Now on to the question: We use the Blue Prism RPA software suite. It has a possibility to insert javascript fragments into a website and subsequently invoke them. I was hoping that I could create a javascript fragment that recreates the template, insert it and then invoke it. I have been working on this for the past week and have hardly gotten any further.

I now am able to add basic text into the required field, but have found that to be able to use the template structure I need to use a different, HTML based, field. This field I find lives inside an iframe.

I have had zero experience with javascript prior to this week (luckily it seems similar to c# in which I do have experience) and now this iframe has me stumped. Apparently when you use Selenium or similar you can switch the driver to the new iframe but I don't have that option, it needs to be done through surface automation. Within javascript as well as the console I can not get it to target the separate document within the iframe. Apparently the iframe contents are not incorporated in that way in the bigger webpage.

So my question is this: How can I "switch focus" to the iframe using javascript? How can I then edit the iframe contents through javascript? Any help, tips etc. would be highly appreciated!

Answer 1

If you go to developer tools in the browser (F12 or right-click inspect) you can use the inpsect tool to get the path you are looking for. an iframe is just another window inside the window and once you have the 'base path' you can then extend further into the window from the iframe base path.

You can access frames one of two ways I know of;

document.getElementById('the frame you are looking for goes here').contentWindow.targetFunction();

and/or

window.frames[0].otherfunctions

where 0 is the Nth order of frame on the window in case there are others.

once you find that path you can interact with sub-elements on that iframe by getting the path to it from within the iframe.

some things to watch out for. frames not loading yet so make sure the frame you want is loaded and no other frame is moving it around the screen at run time. Also make sure the child frame is in the same domain, I think calling javascript has issues when going cross-domain ie it doesn't work (stand to be corrected there though maybe it depends on group settings)

Supply some code or the layout of the page and could give you a code example but top of my head the format will look like this

var doc = window.frames[0] var thing = getElementById(doc.getElementByPath('maybePath')

'perform some set operations like set innerhtml to thing you desire