JS controls on loaded html document

Question

I am just learning javascript, so I really don't know what I'm doing very much. At work, we have several intranet websites that we go to to look up information. I am trying to write something that can expedite this process. I'm stuck on the very first site, just trying to get it to log in. I loaded the website in Chrome, and using JQuery commands, I was able to put the username and password in and click the login button programatically. I am using the following code to load the page...

let Hash = 'abc';
let Pass = '123'
let ATSweb = 'https://website.aspx'
let wHeight = window.outerHeight;

function load_home() {
   document.getElementById("main").innerHTML = '<object type="text/html" height =' + wHeight + ' width = "100%" id="ATS" data=' + ATSweb + '></object>';
   $('input#_ctl0__ctl0_FullPageBody_MainColumn_UsernameTextbox').value = Hash;
}

load_home();

That JQuery command worked in the original page in the developer console in Chrome, but when it's loaded with this code, it doesn't work. In the developer console, if I drill down to the page the code is loading, and then I execute the command, it will put the Hash variable into the control.

I am guessing that there is some way of referencing the document that is being imported that I am not aware of. Any help would be greatly appreciated. Here is my HTML.

<!DOCTYPE html>
<html>
  <body>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <main id="main" height = '100%' width = '100%'>
    </main>
    <script src="index.js"></script>
  </body>
</html>

Do you have any errors in the Console tab of the developer's tools? — Scott Marcus, Mar 01 '18 at 03:46
So: _That JQuery command worked in the original page in the developer console in Chrome_ is referring to **what** jQuery (_command_) statement? — Randy Casburn, Mar 01 '18 at 03:50
Sorry if I wasn't clear. I loaded the original page in chrome. Then in the developer console, I entered this...$('input#_ctl0__ctl0_FullPageBody_MainColumn_UsernameTextbox').value = 'abc'. And it worked. But, if I use the code above and get back into the developer pane, that line of code doesn't work. But, If I get into the elements portion of the developer pane, and drill down to where the imported page is, the line of code will work. — Rob Lego, Mar 01 '18 at 03:59

score 0 · Answer 1 · answered Mar 01 '18 at 03:59

Setting the input value must occur after the external resource (web page in the this case) is loaded.

So when you execute the $(...) statement in the Chrome console all of that loading has happened. But, when you place the code above into the web page the order of things changes a bit. That line of code executes and does nothing because the document has not loaded.

It appears that is what is happening based upon your question. So...

Change

$('input#_ctl0__ctl0_FullPageBody_MainColumn_UsernameTextbox').value = Hash;

To

$('#ATS').on('load', function(){
   $('input#_ctl0__ctl0_FullPageBody_MainColumn_UsernameTextbox').value = Hash;
}

If that doesn't work let me know and we can figure it out.

Thank you for the reply. Unfortunately, that didn't work. I understand what you mean about the page needing to be loaded. But, the page is totally loaded when I enter the code in the console. And it only works after I start navigating through the 'Elements' tab and get to the form where the textboxes are. So, I feel like it has to do with how I am referring to the controls. But, i don't know. — Rob Lego, Mar 01 '18 at 04:49

score 0 · Answer 2 · answered Mar 02 '18 at 01:48

I am beginning to think that this is not at all possible. I keep running into the following error.

Blocked a frame with origin "null" from accessing a cross-origin frame.

The problem seems to be accessing the '#document' element below.

<html>
  <head></head>
  <body>
    <script type="text/javascript" src="js/jquery-2.2.2.min.js">/script>
    <main id="main>
      <object type="text/html" height="1160" width="100%" id="ATS" data="http://thewebsite.aspx"></object>
      #document
      </object>
    </main>
    <script src="index.js"></script>
  </body>
</html>

I got into the console and ran the following lines of code.

let frame = document.getElementById('ATS').contentWindow
let pEl = frame.$('#_ctl0__ctl0_FullPageBody_MainColumn_UsernameTextbox')

And that second line of code is what produced the error about 'Blocked Frame'.

I came across this website which talks about blocked frames and using local files, which is what I am doing.

So, unless anyone has any ideas, I'm going to chalk this one up as impossible.

Thanks for taking the time to check this post out and trying to help though.

JS controls on loaded html document

2 Answers2