JavaScript Works in Browser Console but Not Working with KM Action

Questions & Suggestions
1

I have a very simple JavaScript as follows:

var div = document.querySelector("#content > div");
div.style.width = "800px";

It works when I paste the code into the Browser Console (Safari) and successfully change the width of the div element from "600px" (set by server) to "800px".

However, when I use the following KM action, it does not work:

image
image726×135 17.7 KB

I have no idea why. Can anyone help?
Thanks!

PS: I have another macro that puts the input box on focus before inserting values. This macro (screenshot below) is applies to the same webpage. It woks flawlessly. (I have a problem with this macro, as indicated in the screenshot below, if I use JavaScript to set the value of the input box, the "Return", which will submit the input, will not work. I can work around this issue by adding the "insert text by typing" action, so this is not a big issue for me. I'm adding this information here not because I want to ask question about this--it would be great if someone can comment on this issue as well--but because, for debugging reason, I want to show that another JavaScript works with the same webpage.)

image
image726×338 43.1 KB

Edit: the webpage requires login for access. Therefore, I can't post the url here. But it is a Canvas Grading page, in case if anyone else is using Canvas by instructure.com as well.
Edit: here is a screenshot of the code (the "width" attribute in the highlighted section is what I want to change):
image

2

I would need the HTML code to test.
If you can't provide the URL, then upload a zip file of the HTML source code for the entire page.

Please submit each question as separate topic, unless they are questions about the same problem.

3

Hi @JMichaelTX,

Thanks for your help.

As I was trying to get the source code, I discovered that what I see in the "Sources" tab (Safari) is different from the "Elements" tab.

Elements:

image
image1159×260 60.8 KB

Sources:

image
image1241×337 64.7 KB

As shown above, I have located the parent div element whose id = "content".
However, what follows is different.
This may explain why the KM action does not work.

The "Elements" tab matches the webpage content. The "Sources" tab does not.
So, even if I upload the source code, it will not help.
Any suggestions on how should I proceed?

As I said, although this is a problem, since I have a workaround, it is not a pressing issue to me. I'm not expecting a solution for this problem.

4

I have figured out what was the issue. I'm posting here so that it may help others.

The issue to my problem is that the element I'm trying to grab is inside an iframe.

In this case, I need first to select the iframe, and then do another selector inside the iframe.

This is an example answer I got from stackoverflow.com:

document.querySelector("iframe").contentWindow.document.querySelector("button")
5

Yep, JavaScript injection NOT permitted for iFrames. So KM JavaScript in Browser will NOT work for iFrames.

6

This statement needs qualification. As I have mentioned above, I have made it to work with this code:

document.querySelector("iframe").contentWindow.document.querySelector("button")

I did come across a post at stackoverflow.com where someone answered that if the iframe source is a different domain, JavaScript injection will be rejected (If I remember correctly, you asked the question in that post). In my case, the source url of the iframe has the same domain. The above JavaScript works for me.

Edit:
I found your question here:

I hope I understood the answer correctly (my comments above), but I have not tested that yet.

7

Good point. I stand corrected. It appears that JavaScript injection in an iFrame WILL work provided that both the iFrame and the main web page are using the same domain.

I have NOT tested this, but in your use case it seems to work OK:

1 Like