Android - load and execute javascript on external webpage

Question

Lets presume I want to add a <div>hello</div> a the bottom of the webpage http://www.google.com that I loaded in a WebView. Is it possible?

I can do it for an internal webpage (a page located on the internal memory of the device).

Here is the code of my Activity:

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class Main extends Activity {

    private WebView mWebview;

    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        mWebview  = new WebView(this);
        mWebview.getSettings().setJavaScriptEnabled(true);

        final Activity activity = this;

        mWebview.setWebViewClient(new WebViewClient() {

            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                Toast.makeText(activity, description, Toast.LENGTH_SHORT).show();
            }

            private final String jsFileURL = "file:///android_asset/script.js";

            @Override  
            public void onPageFinished(WebView view, String url){

                final WebView v = view;

                view.loadUrl("javascript:{" +
                        "var script = document.createElement('script');" +
                        "script.type = 'text/javascript';" +
                        "script.src = '" + jsFileURL + "';" +
                        "document.getElementsByTagName('head').item(0).appendChild(script); };");

                new Handler().postDelayed(new Runnable() {

                    @Override
                    public void run() {
                        v.loadUrl("javascript:job();");
                    }

                }, 100);

              }  

        });

        mWebview.loadUrl("file:///android_asset/page.html");
        //mWebview.loadUrl("http://www.google.com");

        setContentView(mWebview );

    }

}

The content of script.js located in the "/assets" folder:

function job() {
    var div = document.createElement('div');
    div.innerHTML = 'hello';
    document.getElementsByTagName('body').item(0).appendChild(div);
}

And the content of page.html located in the "/assets" folder too:

<html>
<head></head>
<body>
<div>content of my page</div>
</body>
</html>

BUT

If I change

mWebview.loadUrl("file:///android_asset/page.html");
//mWebview.loadUrl("http://www.google.com");

by

//mWebview.loadUrl("file:///android_asset/page.html");
mWebview.loadUrl("http://www.google.com");

the trick doesn't work anymore... Is there a security reason?

Do you get any sort of error? Have you dumped the resulting DOM to confirm that your node is really not there (vs. simply not being displayed due to CSS rules or something)? — CommonsWare
– CommonsWare, Commented Sep 5, 2011 at 15:37
No error is shown. I made the same observation when I replace the content of the job() function by "document.getElementsByTagName('body').item(0).innerHTML='sss';" -> JS not executed on a remote file. What do you mean exactly with "dumped"? — Gilbou
– Gilbou, Commented Sep 5, 2011 at 16:03

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Create a folder "raw" in the res : res/raw. then host yourFile.html in the folder raw. then with your code :

String link = this.getApplicationContext().getFilesDir()+ "raw/yourFile.html";

mWebview.loadUrl(link);

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 30, 2012 at 21:50

douarbou

2,2831 gold badge21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Android - load and execute javascript on external webpage

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related