CODEWITHSUNDEEP
javascriptioscordova
user2785840
user2785840

Reputation: 1

Phonegap and ios - onDeviceReady function does not fire in external webpage

I'm currently working on making phonegap with JQuery in IOS.

The initial page from Phonegap is index.html and other pages are external webpage in remote server, and viewed through iframe tags.

I want to open InAppBrowser in Phonegap from External webpage which is shown in WebView.

To do so, I wrote source code in web page as follows,

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
      <script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
      <script type="text/javascript">
     function onBodyLoad(){     
        document.addEventListener("deviceready", onDeviceReady, false);
     }
     function onDeviceReady(){
         alert(" remote page ready!");
     }
}
</script> 

         <title>Hello World</title>
        <script>

            function move_temp()
            {
                window.open("http://www.google.com","_blank","location=no");
            }

            </script>
    </head>
    <body onload="onBodyLoad()">


                                <p> THIS IS REMOTE PAGE!</p>
                <a href="javascript:move_temp();">erwjkl</a>
            </div>
        </div>
    </body>
</html>

My whitelist setting in phonegap is "*" so there should no problem in regards to whitelist policy.

It seems like the onDeviceReady function doesn't fire. Therefore, webpage doesn't bind to the native level which is required to use InAppBrowser module.

What could be the solution?

Thanks in advance :)

Upvotes: 0

Views: 700

Answers (1)

Andrew Lively
Andrew Lively

Reputation: 2153

You should just attach the deviceready listener instead of using the onload, and you have some other problems with your code, like how you are calling the function to open the remote window. Your code should look like this:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <title>Hello World</title>
        <script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
        <script type="text/javascript">  
            document.addEventListener("deviceready", onDeviceReady, false);

            function onDeviceReady(){
                alert(" remote page ready!");
            }

            function move_temp() {
                window.open("http://www.google.com","_blank","location=no");
            }
        </script>
    </head>
    <body>
        <p> THIS IS REMOTE PAGE!</p>
        <a href="#" onclick="move_temp()">erwjkl</a>
    </body>
</html>

Upvotes: 0

Related Questions