Use web.Execute on online website

[Steve Garman]

I could not find a simple example of using web.Execute() to make changes to the data shown by a webview, so I thought I would post one.

f

unction OnStart()
{
 lay = app.CreateLayout( "linear", "VCenter,FillXY" );


 web = app.CreateWebView( 1,0.8,"ignoreerrors" );
 web.LoadUrl( "http://sgarman.net/webex.html" );
 web.SetOnProgress( web_OnProgress );
 lay.AddChild( web );
 
 btn = app.CreateButton( "Test",-1,-1,"Custom" );
 btn.SetOnTouch( btn_OnTouch );
 lay.AddChild( btn );
 btn.SetVisibility( "Hide" );
 
 //Add layout to app.
 app.AddLayout( lay );
}


function web_OnProgress(percent)
{
  if(percent == 100)
    btn.SetVisibility( "Show" );
}


function btn_OnTouch ()
{
    var newDetail = 'This content has been changed '+
         (new Date).toLocaleTimeString();
  var s = 'document.getElementById("myId").innerHTML = "' +
      newDetail + '"';
    web.Execute( s  );
}

The html of the web page can be seen at http://sgarman.net/webex.txt

[Toby Peers]

Hi I'm trying to do something similar but it isn't happening for me.

Any ideas Why?

Here is the alteration I have made to the webGauges file

//Load web page.
web.LoadUrl( "Speed.html" );
        var txt=' '; 
    txt="var t=document.getElementsByTagName('body')[0];\n";
        txt=txt+"alert('ballsack');";
        txt=txt+"\nalert(t.innerHTML);";
       alert('from the gauge webview example?: \n'+ txt);
       web.Execute( txt );

The first alert 'ballsack' is fine and appearing, but the second one is empty.

When I run the same code embedded in speed.html I get

         <canvas id="gauge"></canvas>
<div id="console"></div>
<script>
DrawGauge();
</script> 

[Ultimately I want to add  a javascript pronunciation library to external webpages so that people can use it to read external websites perhaps  by adding <script src="lexicon.js"></script><script src="settings.js"></script> </html> to the external page;

like in the chrome app I'm working on (see screenshot)]

[Toby Peers]

Oddly seems to be working now I've switched to developing on my laptop.

Thanks

Toby

[Steve Garman]

I have added a demonstration of a way to execute code in the WebView that returns a result via console.log

I have commented out code to URI encode the data as I suspect it will be needed for some data people want to send but I don't need it for the demo

This may not be the easiest way to retrieve the page source but I chose it as a simple way to get data to return. 

var url = "http://sgarman.net/webex.html";
function OnStart()

{
  lay = app.CreateLayout("linear", "VCenter,FillXY");

  var hlay = app.CreateLayout( "Linear", "Horizontal" );
  lay.AddChild( hlay );
  web = app.CreateWebView(1, -1, "ignoreerrors FillXY");
  web.LoadUrl(url);
  web.SetOnProgress(web_OnProgress);
  web.SetOnConsole(web_OnConsole);
  lay.AddChild(web);


  btn = app.CreateButton("Change", -1, -1, "Custom");
  btn.SetOnTouch(btn_OnTouch);
  hlay.AddChild(btn);
  btn.Hide();


  btn2 = app.CreateButton("Get", -1, -1, "Custom");
  btn2.SetOnTouch(btn2_OnTouch);
  btn2.Hide();
  hlay.AddChild(btn2);


  //Add layout to app.
  app.AddLayout(lay);
}


function web_OnProgress(percent)
{
  if(percent <= 99) return
 
  btn.Show();
  btn2.Show();
}


//using console for messages
function web_OnConsole(msg)
{
  // the page itself may be using cosole.log
  // so catch json errors or wrong obj
  try
  {
    var obj = JSON.parse(msg);
    app.Alert(obj.head, "Head");
    app.Alert(obj.body, "Body");
  } catch {}
}


// this code is specific to
// sgarman.net/webex.html
function btn_OnTouch()
{
  var newDetail =
    '<h2>This content has been changed ' +
    (new Date).toLocaleTimeString() + '</h2>';

   
  var s = 'document.getElementById("myId").innerHTML = "' +
    newDetail + '"';
   
  web.Execute(s);
}

// this code is not site-specific
function btn2_OnTouch()
{
  // build command for webview to execute
  var s =
    'var temp1=document.body.innerHTML;' +
    'var temp2=document.head.innerHTML;' +
    //'temp1=encodeURIComponent(temp1);'+
    //'temp2=encodeURIComponent(temp2);'+
    "var tobj={body:temp1,head:temp2};" +
    'console.log(JSON.stringify(tobj));'


  // execute it
  web.Execute(s);
}

[Jonas S Karlsson]

I'm mystified. Went not just user the callback function in web.Execute h to get the value?

I must be missing something.

Steve, the code/idea is nice for s sending async messages to the DS app though.

See attached screenshot

PS: I'm not sure where i saw that it takes callback but the docs doesn't really mention it, maybe in just seemed. Anyway, it works...