Load local javascript

tpakis

Active Member
Licensed User
My problem is this: I'm trying to load a javascript from local files with many folders and and files like fonts etc to a webview. It's the MathJax javascript and i want it to run localy like this android app: (with source) Standalone MathJax App for Android | Leathrum's WordPress

Can somebody help me on how to load all these files on android_asset and then load a url using this jabvascript? Any help really appreciated!!!
 

walterf25

Expert
Licensed User
Ok made it, just put the installation files in the files folder of the app and it runs 100%
Hi there, i need to do something similar, i have a javascript file loaded in the files folder and i want to execute this script from within, can you please tell me how you accomplished this?

Thanks,
Walter
 
Upvote 0

walterf25

Expert
Licensed User
There is an example of referencing an asset file here: http://www.basic4ppc.com/android/help/views.html#webview_loadhtml

Hi Erel, thanks for the reply, but i'm talking about an actual java script file, "myjavascript.js" with a few functions in it, how would I go about calling the functions in this file with Webview extras library, i apologize if this questions is stupid, but i'm not very familiar with this kind of stuff.

Thanks,
Walter
 
Upvote 0

warwound

Expert
Licensed User
You'd load the javascript file into your web page using this syntax:

PHP:
<script src="file:///android_asset/myjavascript.js" type="text/javascript"></script>

Once the web page has loaded your javascript file, all functions contained in that file are available for use in your web page.

You can use WebViewExtras and it's executeJavascript method, or you can execute javascript in the web page by using the javascript: protocol and the WebView LoadUrl method:

B4X:
WebView1.LoadUrl("javascript:alert('Hello World')")

See: https://www.google.co.uk/search?q=javascript+pseudo+protocol&ie=UTF-8&oe=UTF-8.

Martin.
 
Upvote 0

walterf25

Expert
Licensed User
You'd load the javascript file into your web page using this syntax:

PHP:
<script src="file:///android_asset/myjavascript.js" type="text/javascript"></script>

Once the web page has loaded your javascript file, all functions contained in that file are available for use in your web page.

You can use WebViewExtras and it's executeJavascript method, or you can execute javascript in the web page by using the javascript: protocol and the WebView LoadUrl method:

B4X:
WebView1.LoadUrl("javascript:alert('Hello World')")

See: https://www.google.co.uk/search?q=javascript pseudo protocol&ie=UTF-8&oe=UTF-8.

Martin.
You'd load the javascript file into your web page using this syntax:

PHP:
<script src="file:///android_asset/myjavascript.js" type="text/javascript"></script>

Once the web page has loaded your javascript file, all functions contained in that file are available for use in your web page.

You can use WebViewExtras and it's executeJavascript method, or you can execute javascript in the web page by using the javascript: protocol and the WebView LoadUrl method:

B4X:
WebView1.LoadUrl("javascript:alert('Hello World')")

See: https://www.google.co.uk/search?q=javascript pseudo protocol&ie=UTF-8&oe=UTF-8.

Martin.
You'd load the javascript file into your web page using this syntax:

PHP:
<script src="file:///android_asset/myjavascript.js" type="text/javascript"></script>

Once the web page has loaded your javascript file, all functions contained in that file are available for use in your web page.

You can use WebViewExtras and it's executeJavascript method, or you can execute javascript in the web page by using the javascript: protocol and the WebView LoadUrl method:

B4X:
WebView1.LoadUrl("javascript:alert('Hello World')")

See: https://www.google.co.uk/search?q=javascript pseudo protocol&ie=UTF-8&oe=UTF-8.

Martin.

Hi Martin, thanks for the fast response,
You'd load the javascript file into your web page using this syntax:

PHP:
<script src="file:///android_asset/myjavascript.js" type="text/javascript"></script>

Once the web page has loaded your javascript file, all functions contained in that file are available for use in your web page.

You can use WebViewExtras and it's executeJavascript method, or you can execute javascript in the web page by using the javascript: protocol and the WebView LoadUrl method:

B4X:
WebView1.LoadUrl("javascript:alert('Hello World')")

See: https://www.google.co.uk/search?q=javascript pseudo protocol&ie=UTF-8&oe=UTF-8.

Martin.

Hi Martin, thanks for the reply, let me see If I understand correctly, I need to add this line
PHP:
<script src="file:///android_asset/myjavascript.js" type="text/javascript"></script>
in my website, or where exactly do i add this line, can you please provide an example for me?

Thanks,
Walter
 
Upvote 0

warwound

Expert
Licensed User
Take a look at these HTML and javascript files:

PHP:
 <!DOCTYPE html>
<html>
   <head>
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script src="file:///android_asset/my_javascript.js" type="text/javascript"></script>
   </head>
   <body>
     <div id="div1">Hi from the web page HTML</div>
     <div id="div2"></div>
   </body>
</html>

B4X:
function setHTML(elementId, html){
   document.getElementById(elementId).innerHTML=html;
}

Both files have been added to a b4a project's files.
The HTML file is loaded into a WebView, the HTML loads the javascript file:

B4X:
Sub Process_Globals

End Sub

Sub Globals
   Dim WebView1 As WebView
End Sub

Sub Activity_Create(FirstTime As Boolean)
   WebView1.Initialize("WebView1")
   Activity.AddView(WebView1, 0, 0, 100%x, 100%y)
   
   WebView1.LoadUrl("file:///android_asset/javascript_test.html")
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub WebView1_PageFinished (Url As String)
   '   the WebView has finished loading the web page, the javascript file has been loaded and it's function are ready to be called
   Dim Javascript As String
   Javascript="javascript:setHTML('div2', 'The web page has now loaded...')"
   WebView1.LoadUrl(Javascript)
End Sub

Once the HTML file has been loaded, the javascript function is used to set the text of a div element in the HTML.

Martin.
 

Attachments

  • Javascript test.zip
    6.5 KB · Views: 257
Upvote 0

ttsolution

Member
Licensed User
Hi Erel,

How can I access file in File.DirDefaultExternal/SalesSummary.json from Javascript

I have already read how to access file in Files folder in Javascrip above ( <script src="file:///android_asset/my_javascript.js" type="text/javascript"></script>). But my file is a JSON and stored in File.DirDefaultExternal folder (It is data file loaded via Web Service) I use javascript to load to Jquery table.

Many thanks,

Jonh,
 
Upvote 0

warwound

Expert
Licensed User
Presumably you have control over the webpage HTML and can modify the script tag's src attribute?
So you could hard code the src attribute (the path to the javascript file) to whatever value is returned by:

B4X:
Log(File.Combine(File.DirDefaultExternal, "SalesSummary.json"))

That's likely to be very unreliable though - different devices will use different paths to the external memory and hard coding the path will not be compatible with all devices.

I think what i'd do is to wait for the page to load and then execute some javascript that will create and inject the javascript into the loaded page on the fly:

B4X:
Sub Process_Globals

End Sub

Sub Globals
   Dim WebPageUrl As String="http://www.basic4ppc.com/android/forum/threads/load-local-javascript.27559/#post-206066"
   Dim WebView1 As WebView
End Sub

Sub Activity_Create(FirstTime As Boolean)
   If Not(File.Exists(File.DirDefaultExternal, "myscript.js")) Then
     File.Copy(File.DirAssets, "myscript.js", File.DirDefaultExternal, "myscript.js")
   End If
  
   WebView1.Initialize("WebView1")
   Activity.AddView(WebView1, 0,0, 100%x, 100%y)
   WebView1.LoadUrl(WebPageUrl)
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub WebView1_PageFinished (Url As String)
   Log("WebView1_PageFinished "&Url)
   If Url=WebPageUrl Then
     Dim Javascript As StringBuilder
     Javascript.Initialize
     Javascript.Append("javascript:")
     Javascript.Append(File.GetText(File.DirDefaultExternal, "myscript.js"))
     Log(Javascript.ToString)
     WebView1.LoadUrl(Javascript.ToString)
   End If
End Sub

That code first copies myscript.js to external memory, then loads this thread in the WebView.
Once the thread has loaded it executes the contents of myscript.js, myscript.js consists of:

PHP:
document.location.href='http://google.co.uk/';

So that executes and the WebView loads the Google homepage.

No need to even have a script tag in the HTML - simply inject the javascript once the page has loaded.

Martin.
 

Attachments

  • inject_javascript.zip
    6.1 KB · Views: 210
Upvote 0

DonManfred

Expert
Licensed User
How can I access file in File.DirDefaultExternal/SalesSummary.json from Javascript
I have already read how to access file in Files folder in Javascrip above ( <script src="file:///android_asset/my_javascript.js" type="text/javascript"></script>). But my file is a JSON and stored in File.DirDefaultExternal folder (It is data file loaded via Web Service) I use javascript to load to Jquery table.

HTML-Part

HTML:
Click <a href="javascript:void(0)" onclick="alert(B4A.CallSub('GetFilecontent', false, 'SalesSummary.json'))">HERE</a> to call a Sub in the B4A demo code that will read a file from RootExternal and return it contents as string.

B4A-Part

B4X:
Sub GetFilecontent(Filename As String)
    Log("FileGetContent("&Filename&")")
    If File.ExternalReadable Then
        If File.Exists(File.DirRootExternal,Filename) Then
            Dim json As String
            json = File.ReadString(File.DirRootExternal,Filename)
            If json = "" Then
                Log("Error: File is empty")
                Return "Error: File is empty"
            Else
                Log("Return: "&json)
                Return json
            End If
        Else
                Log("Return: Error: FileNotFound("&Filename&")")
            Return "Error: FileNotFound("&Filename&")"
        End If
    Else
        Log("Return: File.ExternalReadable = false")
        Return "File.ExternalReadable = false"
    End If
End Sub
 

Attachments

  • webviwextras.changed.zip
    9.8 KB · Views: 189
Upvote 0

u2005k

Member
Licensed User
H
Take a look at these HTML and javascript files:

PHP:
<!DOCTYPE html>
<html>
   <head>
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script src="file:///android_asset/my_javascript.js" type="text/javascript"></script>
   </head>
   <body>
     <div id="div1">Hi from the web page HTML</div>
     <div id="div2"></div>
   </body>
</html>

B4X:
function setHTML(elementId, html){
   document.getElementById(elementId).innerHTML=html;
}

Both files have been added to a b4a project's files.
The HTML file is loaded into a WebView, the HTML loads the javascript file:

B4X:
Sub Process_Globals

End Sub

Sub Globals
   Dim WebView1 As WebView
End Sub

Sub Activity_Create(FirstTime As Boolean)
   WebView1.Initialize("WebView1")
   Activity.AddView(WebView1, 0, 0, 100%x, 100%y)
  
   WebView1.LoadUrl("file:///android_asset/javascript_test.html")
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub WebView1_PageFinished (Url As String)
   '   the WebView has finished loading the web page, the javascript file has been loaded and it's function are ready to be called
   Dim Javascript As String
   Javascript="javascript:setHTML('div2', 'The web page has now loaded...')"
   WebView1.LoadUrl(Javascript)
End Sub

Once the HTML file has been loaded, the javascript function is used to set the text of a div element in the HTML.

Martin.
Hi,
I am keep getting Webpage not available error for your example as well as mine.

WebView1.Initialize("WebView1")
Activity.AddView(WebView1, 0, 0, 100%x, 100%y)

WebView1.LoadUrl("file:///android_asset/javascript_test.html")

Are there any other settings?

Thanks & regards...
U2005K
 
Upvote 0
Top