Inject Javascript into Webscreen to make it dynamic from Tasker 2017-06-07

Learn how to use Javascript to change the behaviour of your page from Tasker

  1. joaomgcd
    IMPORTANT: There's an easier way to get Tasker data into Web Screens by using Web Screen Variables. If that's all you need, please use that. If you really need to inject a full script, go ahead and use this :)

    In this example we're going to create an AutoTools Web Screen with a button which will execute a simple piece of JavaScript code that we inject into a html page from Tasker.

    This is how it'll look like in the end:

    As you can see when you click the button, it'll be replaced by some text.

    STEP 1 - CREATE SCREEN WITH BUTTON


    • Create a task called Show Screen
    • Add an AutoTools Web Screen action
    • Set the Source field to the following HTML code:
    HTML:
    <input type="button" onclick="hello();" value="Say Hello" />
    (i) This is a simple piece of HTML that will create a button that when clicked will execute the hello() function. This button has the text Say Hello.


    STEP 2 - INJECT JAVASCRIPT


    • Under Javascript Injection in Inject In Header write the following script:
    Code (Javascript):
    var hello = function(){
        document.write("Hello!");
    }
    (i) This is a function called hello that will simply replace everything on the page with the text Hello!.
    (i) This function will be called whenever you click the button on the page because of the onclick="hello();" part in the button.


    STEP 3 - TEST


    If you now run the action and click the button you'll see how it'll be replaced by Hello! :cool:


    By using JavaScript injection you can create very dynamic pages based on stuff from Tasker!
    For example, you could create functions in the page that change depending on Tasker variables.
    Or you could inject some JSON on the page from Tasker that could then be used to dynamically generate the page.

    Anything should be possible now!