3

I want to use JavaScript to set the scroll amount of a webpage in an AppleScript, using the second method described in this answer.

This answer focuses on one webpage in particular. I want to branch this method out, so that I can use it on any other webpage. I am unfamiliar with JavaScript.

So, is there some way that I can hover my mouse in a certain location of a webpage, and then I am told what the corresponding JavaScript identifier is? If that's not possible, is there a way to get the JavaScript identifier name of a specific visual element on a webpage?

1

As an example in Google Chrome, using the URL of this question and setting the scroll to point to the question header of the page, use Chrome > View > Developer > Developer Tools ⌥⌘I to find the id. In this case it's called question-header.

You can also right-click and select Inspect from the context menu, which will bring up Developer Tools directly to that point in the code.

The following code will open this page and scroll to the question header.

set myURL to "http://apple.stackexchange.com/questions/276314/how-can-i-find-a-specific-javascript-identifier-of-a-website#276314"
tell application "Google Chrome"
    activate
    tell front window to set curTab to make new tab at after (get active tab) with properties {URL:myURL}
    tell curTab
        repeat while (loading)
            delay 1
        end repeat
        -- scroll to the top of the question header.
        execute javascript "e=document.getElementById('question-header');tTop=0; do {tTop +=e.offsetTop || 0; e=e.offsetParent} while(e); window.scrollTo(0,tTop);"
    end tell
end tell

You can see in the code above that question-header was swapped for twc-scrollabe in the execute javascript ... line of code.

Developer Tools

You can also get a quick list of the <div id= anchor points using curl in Terminal and piping the output to grep, as in the example for this page.

$ curl -s 'http://apple.stackexchange.com/questions/276314/how-can-i-find-a-specific-javascript-identifier-of-a-website' | grep '<div id='
    <div id="notify-container"></div>
    <div id="custom-header"></div>
            <div id="header">
                <div id="hlogo">
                <div id="hmenus">
        <div id="content">
<div id="herobox">
    <div id="hero-content">
            <div id="close"><a title="click to minimize">_</a></div>
        <div id="blurb">
        <div id="desc">
</script>           <div id="question-header">
            <div id="mainbar">
        <div id="comments-276314" class="comments  dno">
        <div id="comments-link-276314" data-rep=50 data-anon=true>
            <div id="answers">
                <div id="answers-header">
                            <div id="tabs">
<div id="answer-276316" class="answer" data-answerid="276316"  itemscope itemtype="http://schema.org/Answer">
        <div id="comments-276316" class="comments  dno">
        <div id="comments-link-276316" data-rep=50 data-anon=true>
<div id="post-editor" class="post-editor js-post-editor">
            <div id="wmd-button-bar" class="wmd-button-bar"></div>
    <div id="draft-saved" class="draft-saved community-option fl" style="margin-top: 8px; height:24px; display:none;">draft saved</div>
    <div id="draft-discarded" class="draft-discarded community-option fl" style="margin-top: 8px; height:24px; display:none;">draft discarded</div>
    <div id="wmd-preview" class="wmd-preview"></div>
                <div id="sidebar" class="show-votes">
<div id="hot-network-questions" class="module tex2jax_ignore">
<div id="feed-link">
    <div id="feed-link-text">
    <div id="footer" class="categories">
            <div id="footer-menu">
                <div id="footer-sites">
            <div id="copyright">
            <div id="svnrev">
                <div id="additional-notices">
        <div id="noscript-warning">Ask Different works best with JavaScript enabled<img src="https://pixel.quantserve.com/pixel/p-c1rF4kxgLUzNc.gif" alt="" class="dno"></div>
$

Note: While curl will bring the page down, the grep command as shown in the example may not work as nice as it did for this page. Some page content doesn't have line breaks and the code is a contiguous stream.

  • I'm a bit confused. After pressing ⌥⌘I, did you manually open every sideways triangle arrow in the code by clicking on each arrow, and then hover your cursor over each line of code one by one, until you noticed that the desired area of the page became highlighted in green/orange? Are the only relevant lines of code that you hovered over those that begin with <div id=? Or should I hover over, for example, lines that begin with <div class= as well, in this context? – rubik's sphere Mar 15 '17 at 0:54
  • @rubik's sphere, I added the line. "You can also right-click and select Inspect from the context menu, which will bring up Developer Tools directly to that point in the code." – user3439894 Mar 15 '17 at 1:01
  • I was looking for a method that was your original answer in reverse, so that, I first hover my cursor over the desired area of the webpage, and then the corresponding line of the code is highlighted automatically. The "Inspect" option in Chrome's context menu accomplishes this perfectly, even if no text is selected and instead the cursor is simply right-clicked in a general area. – rubik's sphere Mar 15 '17 at 1:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .