Is there a way I can read the content of webview after the page is loaded ?
The reason is redirect (like window.location.replace or window.location.href ) is not working in IOS in my case, works fine in Android.
https://docs.nativescript.org/cookbook/ui/web-view
I can access url, error. but how to access content ?
Narayan
I was only looking for IOS. I found the answer and sharing it here. For Android I would like to point some leads.
if (webView.ios) {
var webHeader = webView.ios.stringByEvaluatingJavaScriptFromString("document.head.innerHTML").trim();
console.log(webHeader);
var webBody = webView.ios.stringByEvaluatingJavaScriptFromString("document.body.innerHTML").trim();
console.log(webBody);
} else if (webView.android) {
webTitle = webView.android.getTitle(); //getting the title title
console.log(webTitle)
}
Some stack overflow lead for Android
You could look at this post. installs a library that allows communication with the webview through observables. Right now I'm using it myself and it's great for both iOS and Android
1- install:
tns plugin add nativescript-webview-interface
2- in web project copy plugin file
cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/
3- code:
xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
loaded="pageLoaded">
<web-view id="webView"></web-view>
</Page>
var webViewInterfaceModule = require('nativescript-webview-
interface');
var oWebViewInterface;
function pageLoaded(args){
page = args.object;
setupWebViewInterface(page)
}
function setupWebViewInterface(page){
var webView = page.getViewById('webView');
oWebViewInterface = new
webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');
}
function handleEventFromWebView(){
oWebViewInterface.on('anyEvent', function(eventData){
// perform action on event
});
}
function emitEventToWebView(){
oWebViewInterface.emit('anyEvent', eventData);
}
function callJSFunction(){
oWebViewInterface.callJSFunction('functionName', args, function(result){
});
}
web-view:
<html>
<head></head>
<body>
<script src="path/to/nativescript-webview-interface.js"></script>
<script src="path/to/your-custom-script.js"></script>
</body>
web-view js:
var oWebViewInterface = window.nsWebViewInterface;
// register listener for any event from native app
oWebViewInterface.on('anyEvent', function(eventData){
});
// emit event to native app
oWebViewInterface.emit('anyEvent', eventData);
// function which can be called by native app
window.functionCalledByNative = function(arg1, arg2){
// do any processing
return dataOrPromise;
}
More Info:
https://www.npmjs.com/package/nativescript-webview-interface
http://shripalsoni.com/blog/nativescript-webview-native-bi-directional-communication/
This will work for IOS
if (webview.ios){
url = args.url;
}
Related
I've implemented the Google one tap signin for web using the documentation here, and it works fine on desktop Chrome. However, it doesn't show up at all on iOS Chrome (verison 87) even though I'm signed into Google and the domain is whitelisted.
How do I fix this?
function initialize_google()
{
google.accounts.id.initialize({
client_id: "255011972792-vfp8t4dc4js9perda7aq3f2s6ckjr4p8.apps.googleusercontent.com",
callback: function(credentials) { console.log(credentials) },
context: 'signin',
prompt_parent_id: "g_id_onload"
});
}
function loadScript(url, callback)
{
console.log('in loadScript with url:' + url);
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
loadScript("https://accounts.google.com/gsi/client", initialize_google);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Demo</h1>
<div id='g_id_onload'></div>
Working with Google App script and Javascript, I managed to retrieve xls Gmail attachments, convert it to google sheets, send an warning email to some recipients, insert an event with the Google Drive folder link when a new attachment is added to it, and at the end I managed with a standalone script to import some of the data coming from such xls file converted to a main Google Sheet where one operator is working h24 ( updating some data to be forwarded later on and during the service itself).
The standalone script run every 30 minutes to check incoming mail ( the schedule for the next day or days), and when it find it, it execute the code.
The lock service is not available on standalone scripts up to now, so I cannot lock the document, so I wish to display a message to the user that the script is about to run and not edit anything, since other scripts bounded to the Spreadsheet are using the Lock service, and so the result could be quite disappointing. I searched info regarding this "alert", but I cannot find a clue about it.
Could you address me somewhere?
I could add a menu function instead of a standalone script, and the operator could select "Import data" and that's it, but I wish to automate the operation in background.
You could use the HTML Service. I don't know much about it myself but I think the following may do what you need:
At the top of you .gs file:
var ss = SpreadsheetApp.getActiveSpreadsheet();
var htmlApp = HtmlService.createTemplateFromFile("html");
var status = "Loading....."
htmlApp.data = status;
ss.show(htmlApp.evaluate()
.setWidth(300)
.setHeight(200));
At the end (just before the last brace):
var status = "Finished!"
htmlApp.data = status;
ss.show(htmlApp.evaluate()
.setWidth(300)
.setHeight(200));
In a new HTML script file named 'html':
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h2>Updating..</h2>
<p id="status">(innerHTML).</p>
<div id="imageico"></div>
<script>
var imageContainer = document.getElementById("imageico");
if (<?= data ?> != "Finished!"){
document.getElementById("status").innerHTML = "Running script, please wait..";
} else {
document.getElementById("status").innerHTML = "Finished! You can now close the window.";
closeBtn();
}
function closeBtn(){
var button = document.createElement("INPUT");
button.setAttribute("type", "button");
button.setAttribute("value", "Close");
button.setAttribute("onclick", "closeWindow();");
imageContainer.appendChild(button);
}
function closeWindow(){
google.script.host.close();
}
</script>
</body>
</html>
EDITED Based on comments
In your .gs file:
function test() {
htmlApp("","");
/*
*
* Put your code in here....
*
*/
Utilities.sleep(3000); // change this value to show the "Running script, please wait.." HTML window for longer time.
htmlApp("Finished!","");
Utilities.sleep(3000); // change this value to show the "Finished! This window will close automatically. HTML window for longer time.
htmlApp("","close"); // Automatically closes the HTML window.
}
function htmlApp (status,close) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var htmlApp = HtmlService.createTemplateFromFile("html");
htmlApp.data = status;
htmlApp.close = close;
ss.show(htmlApp.evaluate()
.setWidth(300)
.setHeight(200));
}
In the HTML script file named 'html':
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h2>Updating..</h2>
<p id="status">(innerHTML).</p>
<div id="imageico"></div>
<script>
var imageContainer = document.getElementById("imageico");
if (<?= data ?> != "Finished!"){
document.getElementById("status").innerHTML = "Running script, please wait..";
} else {
document.getElementById("status").innerHTML = "Finished! This window will close automatically.";
}
if (<?= close ?> == "close"){
google.script.host.close();
}
</script>
</body>
</html>
Have a look at this Sample Spreadsheet.
I don't see any methods or sample scripts regarding your concern. But this documentation about alert might help. It will open a dialog box in the user's editor with the given message and an "OK" button. However, this method suspends the server-side script while the dialog is open and the script will resume after the user dismisses the dialog.
You may also execute alert dialogs before running your script.
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu('Custom Menu')
.addItem('Show alert', 'showAlert')
.addToUi();
}
function showAlert() {
var ui = SpreadsheetApp.getUi(); // Same variations.
var result = ui.alert(
'Please confirm',
'Are you sure you want to continue?',
ui.ButtonSet.YES_NO);
// Process the user's response.
if (result == ui.Button.YES) {
// User clicked "Yes".
ui.alert('Confirmation received.');
} else {
// User clicked "No" or X in the title bar.
ui.alert('Permission denied.');
}
}
I am currently using, IONIC v1.0.0, AngularJs and ngCordova v0.1.23-alpha on IOS and Android.
I have come across an issue with my login view freezing up.
It happens after opening InAppBrowser and hitting "back to app" (close button caption used for IOS to get back) is freezes my login view disabling the ability to touch on the whole screen and making me unable to login. It only happens if I call InAppBrowser when starting the app, if I use it during the app life cycle (after login in), it doesn't do it.
Here are some of my code pieces
In app.js:
angular.module('MyApp', ['ionic', 'MyApp', 'ngCordova', 'mainController', 'loginController', 'pascalprecht.translate', 'ngStorage', 'ngSanitize', 'ngAnimate', 'ngTouch', 'ngCookies', 'ngLocale', 'testController'])
In mainController I have Factory:
.factory('customMainFunction', function ($rootScope, $ionicLoading, $ionicScrollDelegate, $ionicPopup,
$timeout, $localStorage, $location, $ionicHistory, $window, $cordovaInAppBrowser) {
var Token = "";
return {
openBrowser: function (link) {
var options = {
location: 'yes',
clearcache: 'yes',
toolbar: 'yes',
closebuttoncaption: 'Back to App'
};
document.addEventListener("deviceready", function () {
$cordovaInAppBrowser.open(link, '_blank', options)
.then(function (event) {
// success
})
.catch(function (event) {
// error
});
}, false);
$rootScope.$on('$cordovaInAppBrowser:loadstart', function (e, event) {
//console.log(event);
var url = "";
var positionNumber;
var res;
url = event.url;
positionNumber = url.search("ssoToken=");
res = url.substr(Number(positionNumber)+9);
/*positionNumber = url.search("module=");
res = url.substr(Number(positionNumber)+6);*/
if(url !== "" && positionNumber >= 0 && res.length > 0) {
$rootScope.$broadcast('ssoToken', { token: res });
$cordovaInAppBrowser.close();
}
});
$rootScope.$on('$cordovaInAppBrowser:loadstop', function (e, event) {
console.log("loadstop");
//console.log(event);
// insert CSS via code / file
//$cordovaInAppBrowser.insertCSS({
// code: ''
//});
// insert Javascript via code / file
//$cordovaInAppBrowser.executeScript({
// file: ''
//});
});
$rootScope.$on('$cordovaInAppBrowser:loaderror', function (e, event) {
});
$rootScope.$on('$cordovaInAppBrowser:exit', function (e, event) {
});
}
}
})
If anybody has encounter such issue please let me know what can be done to resolve it. Any question or clarifications let me know. Thanks in advance.
Found the issue of my own problem. Basically the problem is related to Threading. Look for Threading. How did I find out about it? On XCode I was able to see a message saying:
THREAD WARNING: ['InAppBrowser'] took '108.12' ms. Plugin should use a
background thread
There are two ways to solve this (I believe):
1- Using background threading (just like the message states). Please refer to:
How to run cordova plugins in the background?
2- Wrap the openBrowser function call (in my case) in a setTimeout. That will delay the call until the thread is done and UI won't be blocked. Once done (in my case) it opened the inAppBrowser and when I hit "Back to app" UI was not block at all.
Hope this helps someone out there.
I work on a Windows 8 app, and from a page that I use link hystory for running back and forward through the app, I also have 3 or 4 links to external websites(eg: facebook or my site). I tried to run them in iframe, or also to make them open in the default browser like simple links. Both method resulted in an error in base.js that says it can't handle my error (!?) I searched a lot before asking here. I watched msdn sample that works just fine, but if i copy what I need in my app results in the same error. I I use it from another page where I dont have forward history, it works, but i really need it on the front page. Any ideeas? Thank you very much.
LE:
This is my items.js code: ( for the items.html page )
(function () {
"use strict";
var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
var ui = WinJS.UI;
ui.Pages.define("/pages/items/items.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
var listView = element.querySelector(".itemslist").winControl;
listView.itemDataSource = Data.groups.dataSource;
listView.itemTemplate = element.querySelector(".itemtemplate");
listView.oniteminvoked = this._itemInvoked.bind(this);
this._initializeLayout(listView, Windows.UI.ViewManagement.ApplicationView.value);
listView.element.focus();
WinJS.Utilities.query("a").listen("click", this.linkClickEventHandler, false);
},
// This function updates the page layout in response to viewState changes.
updateLayout: function (element, viewState, lastViewState) {
/// <param name="element" domElement="true" />
var listView = element.querySelector(".itemslist").winControl;
if (lastViewState !== viewState) {
if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
var handler = function (e) {
listView.removeEventListener("contentanimating", handler, false);
e.preventDefault();
}
listView.addEventListener("contentanimating", handler, false);
var firstVisible = listView.indexOfFirstVisible;
this._initializeLayout(listView, viewState);
if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
listView.indexOfFirstVisible = firstVisible;
}
}
}
},
linkClickEventHandler: function (eventInfo) {
eventInfo.preventDefault();
var link = eventInfo.target;
WinJS.Navigation.navigate(link.href);
},
// This function updates the ListView with new layouts
_initializeLayout: function (listView, viewState) {
/// <param name="listView" value="WinJS.UI.ListView.prototype" />
if (viewState === appViewState.snapped) {
listView.layout = new ui.ListLayout();
} else {
listView.layout = new ui.GridLayout();
}
},
_itemInvoked: function (args) {
var groupKey = Data.groups.getAt(args.detail.itemIndex).key;
WinJS.Navigation.navigate("/pages/split/split.html", { groupKey: groupKey });
}
});
})();
And from items.html I have different types of links: some of them links to other application pages, from where I can return with history buttons back/forward and some of them are links to external page. Simple link.These links crashes my app with the error that I mentioned below. If I erase the next line:
WinJS.Utilities.query("a").listen("click", this.linkClickEventHandler, false);
from my js script, external links works, but I dont have anymore history buttons in my others's app pages.
You are trying to use the navigation framework to navigate to an external URI. It's usually meant to be used within the application's local context and pages that can contain 'fragments' to load up into your main nav control.
I wouldn't hook anchor tags with your function call, instead in your linkClickEventHandler I would do the following to only hook your internal links
WinJS.Utilities.query(".nav").listen("click", linkClickEventHandler, false);
in turn your internal links would be
click me
This approach only hooks the navigation framework into your internal links. Another approach is to inspect the 'this.href' in your handler and if it contains http:// or https:// then call window.open instead
I want to import and export CSV's. I have figured out how to get the iPad to recognize my app as one that opens CSV files.
From there though I am lost. I have found explanations on how the iPad sends in my file via application:didFinishLaunchingWithOptions or handleOpenURL ...
I've figured out that adding a function called handleOpenURL(url) in my js file passes me the url for the file... so now I have this.
That is great because I now know that someone has opened my app this way. Cool... BUT how do I grab the contents of that URL?
GOT IT! Woot, this is what i did...
function handleOpenURL(url)
{
window.resolveLocalFileSystemURI(url, onResolveSuccess, fail)
}
function onResolveSuccess(fileEntry)
{
fileEntry.file(win, fail);
}
function win(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
alert("succes");
alert(evt.target.result);
}
reader.readAsText(file);
}
function fail() {
alert('fail');
}