WebView

Similar Questions

• How to report bugs of rendering CSS browser WebView/BB?

  I have an app that bypasses the normally difficult radio button style html5 by cutting the real radio inside a rectangle 0,0,0,0, then using the CSS: before Pseudo selector to create a substitute radio button image using nothing more than CSS attributes. It works perfectly on every single desktop browser, I tested against (Chrome, Firefox, IE, Opera), each Android browser, I've tried (Chrome, Firefox, Opera) and the same Android browsers running on my Z10 via Cobalt (Chrome, Firefox, Opera), but on the browser BB10 and WebView (so-called WebKit based as Chrome and Opera) does not support the CSS style the : Pseudo-selector update to show that when the Group of option buttons has focus.

  This is an example of what a couple of radio buttons by using this technique looks like when they have not developed in the...

  

  When option buttons have the focus, it should look like this...

  

  But as I said, on the browser BB10 or WebView even with the development of radio buttons always look like the first example. On all other browsers (except iOS/Safari, which proves defective as browsers BB10) favouring option buttons look like the second example.

  Anyone where I can tell you something like that?

  In the immortal words of Emily Littela... never mind. Since the BB10 and WebView browser seem to ignore the: pseudo-selector developed, I thought that it was a CSS rendering problem, but it is not. The idea that led me to a solution, is that the same problem occurs on iOS Safari too. A little Google search on the oddities of Safari has revealed the real cause.

  It turns out that even if Safari, as the browser BB10 and WebView, are Webkit based, he manipulates not the focus of the element like all the other funds or Android mobile WebKit browsers. Based on certain types of HTML elements is not automatically set focus to this element. One of the element types that it affects is the radio input element that I use. Some devs online are speculating that avoids unnecessary popups of the keyboard to the iOS screen by typing some controls on a form, but does not say Apple.

  The solution is quite simple, just set the focus in the OnClick of the radio input element explicitly. In this way, by tapping the control will force the browser to focus control and if necessary: focus CSS will be applied...

  myRadioButton.focus();
  

  I use jQuery so my generic code to manage all the radio buttons to a page looks like this...

  $('input[type="radio"').click( function() {
      $(this).focus();
  });
  

  It is clear that BlackBerry browser and WebView work in the same way as iOS Safari because this code sets things there also. I don't know if someone else is bickering with this problem when you target the WebView or BB10 browser, but I thought I would post the solution, just in case.

• Embed the video player in WebView - Fullscreen problems

  I'm at the point where I have to integrate a 3rd party html5 web player.

  I created a view of web pages containing the video player embedded in an iFrame. I have also the app resize the display orientation of the device-based Web.

  The problem is with the button full screen set up in the video player. Pressed, she calls a video player fullscreen BB10. This works well until the orientation of the device is changed. The full screen video not to back the new dimensions of the screen, and after leaving full-screen, the webview dimensions are incorrect.

  What is called when the button fullscreen is pushed? Where can I get and edit the metadata for the fullscreen player? Be able to address this issue is absolutely crucial to be able to finish my application, so any help will be greatly appreciated.

  I've done an investigation more, and it appears as if it is actually a bug in the operating system. I have loaded a developer version of 10.3.1 on my Z10, and media player automatically adapts to the direction correctly.

• Trouble sometimes with WebView short Web page rendering

  I noticed sometimes in my application poorly rendered Web pages in a WebView because the webview appears dynamically size itself so that it is only as high as it should be... so if something to Center vertically, it appears at the top of the screen, not the vertical middle of the screen. There was even a Yahoo/Facebook login page that started small and has started to grow a few pixels per second!

  I tried to add:

  verticalAlignment: VerticalAlignment.Fill

  ... for the WebView to the ScrollView as if it is contained in and to the container that contains the ScrollView, but that doesn't seem to help.

  I found another post on the forum that answers this question:

  WebView {
      ...
      preferredWidth: Infinity
      preferredHeight: Infinity
  }
  

• OS 10.3 / WebView: no interaction with the Google Maps Javascript API

  Hello

  Google Maps Javascript API no longer works correctly using the Web on OS 10.3.  On all the operating system previous releases everything worked perfectly fine in WebView but on OS 10.3 even if the plan (or view, or anything else provided by Google APIs) is displayed correctly, there is no interaction whatsoever with it - no response to taps, none is panoramic, no zoom, etc.

  I don't speak of the 10.3.0.698 Simulator - I do not have access to the true OS 10.3 device.

  Even simple examples of Google Maps doesn't work, try for example:

  import bb.cascades 1.2
  
  Page {
      Container {
          preferredHeight: 720
          preferredWidth: 720
          WebView {
              preferredHeight: 720
              preferredWidth: 720
  
  url: "https://google-developers.appspot.com/maps/documentation/javascript/examples/full/marker-simple"
          }
      }
  }
  

  The map appears, but there is absolutely no interaction with it - just a STATIC content.  On OS 10.2.xxxx, it works perfectly fine...

  P.S. If you open the same example URL directly in the web browser on OS 10.3 everything works well - responds to taps, she can be zoomed, panned, etc..    So, it's apparently a problem with user agent (which is probably the same web browser both webview).  Change the user agent in WebView to e.g. Z10 user agent doesn't help, either.

  Can anyone help?

  Your sample application does not seem to suffer the original bug, I thought. That bug could cause a WebView with no ancestor ScrollView would get too small window Visual and tactile input would be anchored to the Visual display window very small. If you want to learn more on this topic, see a tale of two windows - part for the discussion of Visual and updated display on the page. Perhaps your sample application it is OK because it specifies a preferredHeight for Web display, which can affect the used Visual display window.

  To be more precise, on a real device of passport BlackBerry running OS versions 10.3.0.1052 and 10.3.0.1154, the sample you provided responds perfectly to press ENTER.

  However, on the Simulator on OS 10.3.0.698, I can confirm input touchscreen does not work. Therefore a separate bug, which seems to be specific to the Simulator.

  I think you can be assured that end users will still be able to use your app (s) on a real passport of BlackBerry device, but it is unfortunate that it does not work on the Simulator.

• WebView ListView data Page

  I have a ListView that ItemData containing Web sites. When you select an item, it pushes a page from the data. I can view the data. Then I have an action button that pushes another page with a WebView. The problem I have is that the WebView never is completed and said that the web page is unavilable. I have a label that does not display the correct Web page and I can also get the Web page to display if I put the url directly to the page.

  Here is the code:

      actions:  [
          ActionItem {
              title: qsTr("View")
              imageSource: "asset:///icons/actions/view.png"
              onTriggered: {
                  var page = htmlPage.createObject();
                  page.url = "http://www.google.com";
                  console.log(page.url);
                  navPane.push(page);
              }
  
          }
      ]
  

  import bb.cascades 1.2
  
  Page {
  
      property string  url
  
      id: htmlPage
      Container {
          preferredWidth: Infinity
          preferredHeight: Infinity
          verticalAlignment: VerticalAlignment.Center
          horizontalAlignment: HorizontalAlignment.Center
          WebView {
              id: webView
              settings.background: Color.Black
              url: url
          }
         Label {
             text: url
             textStyle.fontSize: FontSize.XXSmall
          }
      }
  }
  

  I tried a lot of different things without success. Anyone have this type of process work?

  All of a sudden, it came to me.

      property alias url : webView.url
  

• Progress indicator overlap Webview

  Hello

  I have tried to solve this one for a while now and came on the Support Forums for help because I have absolutely no idea what is causing this to happen.

  I use a webview and then using a progress meter to display the web page loading inside the webview. The only problem I have is that a thin black line appears at the bottom of the page and then the progress indicator support above it.

  BlackBerry 10 UI guidelines should not be black lines on the screen; then, before I release my update, I want to get rid of that black line.

  

  Any help would be greatly appricated, thank you

  No I meant the top-level one who holds your WebView, this is my code (bits removed for clarity)...

  Container {
  
          layout: DockLayout { }
  
              ScrollView {
                  id: scrollView
  
                  scrollViewProperties {
                      scrollMode: ScrollMode.Both
                      pinchToZoomEnabled: true
                  }
  
                  Container {
                      background: Color.LightGray
  
                      WebView {
                          id: webView
                          url: "http://www.google.co.uk"
  
                          settings.viewport: {
                              "width": "device-width",
                              "initial-scale": 1.0
                          }                     [ ... removed ... ]
  
                      }
                  }
              }
  
              Container {
                  horizontalAlignment: HorizontalAlignment.Center
                  verticalAlignment: VerticalAlignment.Bottom
  
                  bottomPadding: 30
  
                  ProgressIndicator {
                      id: loadProgress
                      opacity: 0.0
                  }
              }
  

• Transition between screens for WebView White flickers questions

  Hi all

  Application architecture: HTML/JS/CSS hosted on an HTTPS URL to a web server.

  BB10 app is conditioned to invoke this URL and start pages in the application.

  Here are the contents of the config.xml file:

  
  
  http://www.w3.org/ns/widgets"
          xmlns:rim="http://www.blackberry.com/ns/widgets"
          version="1.0.0"
          id="Dropbox_app">
      Dropbox
      
    
  
      DropboxApproval
      
      
      Loading...
      http://www.apache.org/licenses/LICENSE-2.0">
          Licensed under the Apache License, Version 2.0 (the "License");
          you may not use this file except in compliance with the License.
          You may obtain a copy of the License at
              http://www.apache.org/licenses/LICENSE-2.0
          Unless required by applicable law or agreed to in writing, software
          distributed under the License is distributed on an "AS IS" BASIS,
          WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
          See the License for the specific language governing permissions and limitations under the License.
      
      
                      
      
      
                      
      
      
      
  
          
          
          
          
          
          
            
            
      
          
      
  
      
  
  
  

  Here's index.html file content:

  Now when you navigate to index.html file, it is showing white screen as follows:

  This is perhaps due to the network latency or loading javascrip and css in the HTML page. I found two post associated with white screen below:

  https://github.com/BlackBerry/BB10-WebWorks-framework/issues/202

  https://github.com/BlackBerry/BB10-WebWorks-framework/issues/244

  Is it possible to put the indicator type thing on this webview activity.

  A solution is I'm thinking or trying to load all my JS and css after the body tag.

  Please, help me to overcome this obstacle. It's very urgent.

  Thanks in advance

  

  BBUI uses an Ajax approach to navigation, but it's not exactly cross-platform (depends on the BlackBerry API):

  https://github.com/BlackBerry/bbUI.js/

  jQuery Mobile also has this implementation approach.

  http://demos.jquerymobile.com/1.0a4.1/docs/pages/docs-navmodel.html

  A more complete list can be found here:

  http://en.Wikipedia.org/wiki/List_of_Ajax_frameworks#JavaScript

  Let us, I'm not sure of a library that can just be "inclusive" and resume with all being based on Ajax navigation. You should encode your application based on a chosen framework process.

  I don't have an example to do directly with pure HTML/JS. If all of your "pages" are located in the same document, it is simply a matter of showing / hiding one another (or replace a common 'visible' div with the content of another.) If your pages are located in separate files, you need to load these files programmatically, and then insert them into the div 'visible '.

  On other platforms, they asking the web are disadvantaged from an external site as well? If so, it's probably just that the process is a little different from BB10 in terms when the document is destroyed / new document is presented.

• To view documents using WebView

  Hi all!

  I'm new in the development of BB. Can you help me? Can I use WebView stunts for the display of documents (doc, xls, pdf, png etc.) Some, like iOS UIWebView https://developer.apple.com/library/ios/qa/qa1630/_index.html

  I have tired:

  {Page}

  {Of container

  WebView {}

  ID: webView

  Accessibility.Name: ' TODO: Add the contents of the property.

  onLoadingChanged: {}

  If (loadRequest.status == WebLoadStatus.Started) {}

  Console.log ("Load has started.")

  }

  Else if (loadRequest.status == WebLoadStatus.Succeeded) {}

  Console.log ("Load finished.")

  }

  Else if (loadRequest.status == WebLoadStatus.Failed) {}

  Console.log ("Load failed.")

  }

  }

  }

  }

  function loadData (happy) {webView.loadData (happy) ;} / / happy - QByteArray is with the content of the file}

  }

  But I got "Load has failed." on any docs

  Find target calling card for the Docs To Go and Adobe Reader:

  Docs To Go: https://developer.blackberry.com/native/documentation/cascades/device_platform/invocation/docstogo.h...

  Adobe Reader: https://developer.blackberry.com/native/documentation/cascades/device_platform/invocation/adobereade... (other)

• Possible to extract a part of code HTML of WebView and exposes to QML?

  Spending a few hours to research this, but not really sure.

  My application has a lyrics Viewer, it opens the page with a WebView then uses evaluateJavaScript to strip all normal visible header and the actual words, everything works great and leaves me with just the text words.

  I would like to take that text and somehow move it to QML so I can strip things html and ending up with a gross QString with the text of the words and finally display it with a tag, but not really sure how.

       webView.evaluateJavaScript(
                           "var content = document.getElementById('mw-content-text');" +
                           "while (document.head.firstChild) { document.head.removeChild(document.head.firstChild); }" +
                           "while (document.body.firstChild) { document.body.removeChild(document.body.firstChild); }" +
                           "var header = document.createElement('h1');" +
                           "header.style.color = ('white');"+
                           "header.innerHTML = '" +  lyricsDataArtist+ " " +  lyricsDataSong + " Lyrics';" +
                           "document.body.appendChild(header);" +
                           "var lyrics = content.getElementsByClassName('lyricbox')[0];" +
                           "lyrics.removeChild(lyrics.firstChild);" +
                           "document.body.appendChild(lyrics);"+
                           "lyrics.style.color = ('white');"+
                           "document.body.style.background = ('black');"
                           );
  

  Any ideas appriciated.

  Thank you

  I suspect you can do what you need by calling navigator.cascades.postMessage () of your injected JavaScript and catch with the WebView::messageReceived signal. I use this mechanism in my application support to get stuff to the pages loaded in my C++ code, but it also works well with QML.

  Signal WebView::messageReceived() documentation

• CORS for Webview in Cascades

  The Web view is not able to make ajax requests to Web sites or in the api that do not have the same original disabled policy. There is no problem with phonegap or webworks, but with waterfalls.

  Here is an article with a workaround which unfortunately no longer works, maybe one of you guys can do it help me:

  http://wesquire.ca/blog/2013/03/BlackBerry-10-Cascades-WebView-CORS

  @anzor_b @Kareem_ELSayed @Pumano

  Thank you for your time and help me with this problem. You are both well it seems that the api isn't really compatible CORS. The funny thing is that I can consume with XmlHttpRequest API in stunts, but not from the Web view. Do not know why.

  There is a fairly simple solution for all the APIs that do not support the HORNS, there is a small proxy here site: http://jsonp.jit.su which allows you to access the API of 4chan and other APIs with no problems directly from the Web view with jQuery.

• WebView - capture webview content and generate an image.

  I was wondering what would be the best way to achieve an export of the image of a WebView. The content of the Web view can be more than one page, so to capture the display images would not work in my scenario.

  Pointers?

  Arround came up with the following... Played arround with the HTML format and got it correctly fits on a single screen. Then implemented appshot example code:

  https://github.com/BlackBerry/Cascades-samples/tree/master/appshot

  A did the trick...

• Flashing WebView rendering glitches, visual tearing etc.

  I used a WebView in some of my apps of waterfalls (only tested on my DevAlpha) and I noticed after some use (15 seconds to 10 minutes) than the graphic display making it starts choking and make it starts flashing an or view a checkerboard patterns.

  If I run the same content in a Web view in adobe air, I have no questions.

  Is it just a question on the alpha of dev? But OK on BB10?

  I'm ok with using a kind of "reset" to the Web mode, if it helps... I'm just not seeing something like this in the API.

  Also has anyone seen this behavior? No work around magic? (Or does anyone know if this problem is solved on the finals features?

  The question itself seems fixed in the latest version after the launch of the operating system on the Dev Alpha.

  Now consider the problem solved.

• How to set the text back in webview?

  Hello

  Someone knows how to put the text in full screen according to the 2 screen capture?

  Code

  import bb.cascades 1.0
  
  Page {
      Container {
          //Todo: fill me with QML
          ScrollView {
              id: scrollView
              scrollViewProperties {
                  scrollMode: ScrollMode.Both
                  minContentScale: 2
              }
              WebView {
                  id: webView_Condiciones
                  url: "local://assets/html/copy_Right.html"
              }
          }
      }
  }
  

  screenshot 1 (I got the result as below)

  

  Screen Shot 2 (need to result as below)

  

  So let me know what I did wrong?

  Hello

  I think your problem is

   minContentScale: 2
  

  Ask yourself the ScrollView to zoom in on your web pages display... Zoom will make wider and higher...

  If you just want more large print, try something like this:

  import bb.cascades 1.2
  
  Page {
      Container {
          //Todo: fill me with QML
          ScrollView {
              id: scrollView
              scrollViewProperties {
                  scrollMode: ScrollMode.Both
              }
              WebView {
                  id: webView_Condiciones
                  url: "local:///assets/index.html"
                  settings.defaultFontSize: 32
              }
          }
      }
  }
  

  With this HTML code:

  
  
  Hey There
  
  Lorem ipsum dolor sit amet, consectetur adipiscing . . . . . . . .  .  ---8<-- SNIP -->8--
  

  I see:

  

• WebView - a few questions

  I use WebView and even the stunts for the first time (I learned qt already) and I have a few questions.

  How can I listen to the signal of onURLChanged() - I tried to connect to its signal in the PRC, but do not shoot my slot. I call a function in my CPP code indicating its name in qml?

  I ask on qml because I think that there is connection of signals / slots in qml examples I've seen (by omitting the need to connect (mWebView, onUrlChanged(), myFunction()) but I don't see how I could connect say webview onUrlChanged (const QUrl & url) to myFunc (QUrl & myurl) located in a .cpp file using code rather than c qml ++.) Is this possible?

  Also, when I open a Web using Webview page and then reload the application, I get an error momentics can prepare and download of executables which means I have to restart dev unit alpha - what should I do with webview in deconstructor to stop this requirement to reboot?

  Thanks for any help you can offer.

  I'm sorry, meant that the parameter names must be qualified full.

  This one should work:

     QObject::connect(mView, SIGNAL(urlChanged(QUrl)),
                       this, SLOT(urlChanged(QUrl)));
  

  void ClassName::urlChanged(const QUrl& url)
  {
    ...
  }