11

We have a native ios application, which displays a web view with HTML web page and two iframes. Inside those iframes, we display our articles from HTML files located in resources of the app. Inside the articles, there are often javascript scripts which operate on both articles at the same time. For example, make some part of the text bold. To do this, it lists all of the elements with a particular class and modify its CSS style.

$(".question").length()

would return the number of elements with class .question in both iframes on iOS, where it would only return elements from current iframe on Android. By "current" I mean the one that user interacted with to start the script.

We have a requirement to also release an android app. It all went fine, until I tested an article, where javascript has to operate on both iframes. Unfortunately, it can only access elements from one iframe.

Is there any way I could make it work without changing the code of the javascripts attached to the articles? I have no authority there [besides it could be thousands of articles with plenty of custom javascripts to update].

Thank you

Krystian
  • 3,193
  • 2
  • 33
  • 71
  • have you looked at [this](https://stackoverflow.com/questions/11955413/accessing-elements-of-one-iframe-from-another-iframe) and [this](https://stackoverflow.com/questions/4132411/how-to-call-a-function-in-an-iframe-from-the-parent-page)? – Hugo sama Jul 18 '17 at 20:34
  • Yeah, it would require changes in the content I have no way to change. – Krystian Jul 19 '17 at 08:36

1 Answers1

1

This is how i managed a similar case 

webview.loadDataWithBaseURL("file:///android_asset/", your_html_as_string_here, "text/html", "utf-8", null);
webview.getSettings().setJavaScriptEnabled(true); // enable javascript
            webview.addJavascriptInterface(new WebViewJavaScriptInterface(getActivity()), "app");

and have to create a inner class and call same function as mentioned in javascript interface as 'app.function1' 

public class WebViewJavaScriptInterface {

        private Context context;

        /*
         * Need a reference to the context in order to sent a post message l
         */
        public WebViewJavaScriptInterface(Context context) {
            this.context = context;
        }

        /*
         * This method can be called from Android. @JavascriptInterface
         * required after SDK version 17.
         */

        @JavascriptInterface
        public void function1() {
            ll_translucent.setVisibility(View.VISIBLE);
        }

        /*
                * This method can be called from Android. @JavascriptInterface
                * required after SDK version 17.
                */
        @JavascriptInterface
        public void function2() {
            new CommonActions(getActivity()).showSnackToast(verticalSeekBar, "Purchase Episode to read Further");
        }
    }
g7pro
  • 817
  • 1
  • 6
  • 11
  • I honestly don't understand your example. You're just loading a web page and exposing two javascript interface functions. How does that help with accessing content of one iframe from another iframe? – Krystian Mar 09 '17 at 15:46