I have a webview with HTML contents. And I have few links in that HTML content. when i clicked the link,corresponding webpage opens within my application. Can i open the webpage in mobile browser when i clicked a particular link?
I have tried using target="_blank" property within anchor tag,which doesn't works.
and also i have used "openURL" webview property, but fireEvent is not working properly.
my main js file;
var mywebview = Ti.UI.createWebview({
height : 'auto',
width : '100%',
html : '<!DOCTYPE html><html><body>Visit W3Schools.com!<br>Visit Google.com!</body></html>',
)};
In app.js;
Ti.App.addEventListener("openLink", function(e){
alert(e.linkUrl);
Ti.Platform.openURL(e.linkUrl);
});
Ti.App.fireEvent works for me in this form:
youatnotes.com
and in app.js:
Ti.App.addEventListener('ynOpenURL', function(e) {
Ti.Platform.openURL(e.url);
});
You could the URL of the webview in the event in order to open the link inside the WebView.
Related
Need to display html page content in react native app and also need to implement a text search on the html page content, please advise
in HTML: I added a text box and search button on top of the html page in a floating div and added text searching js function in the tag
React Native App: added react native html viewer library to load the html page content in the webview
HTML text contents are showing but the text input box and search button are not showing, also js functions are not executing
You can use react native web view and load the html page with it.
You should enable java script by changing the web view props:
render() {
return (
<WebView
source={{uri: 'https://example.example.com'}}
javascriptenabled={true} />
);
}
For more details - https://facebook.github.io/react-native/docs/webview
I'm trying to create a hybrid react native app to host my website's content in webviews. Something like this: Supreme App
One thing I want to achieve is: when a <a href> link is clicked on my website, instead of webview just show the new link's content, I want the app to push a new page and show the new link content in the new page, so that I can maintain a good page backstack and it feels more like native app (for each navigation, there's a new page for it).
I'm wondering how I can detect link click, push a new page instead of let the webview do default link navigation. Thanks!
You can use WebView prop onNavigationStateChange to detect the change in url.
On clicking <a> the webview will redirect, the onNavigationStateChange will fire. You can use this callback to push a new screen in the app.
Eg.
<WebView
ref={r => this.webview = r}
style = {{marginTop : 0}}
onNavigationStateChange={this._onNavigationStateChange}
source = {{uri: 'https://www.your-url.com' }}
/>
_onNavigationStateChange=(webViewState)=>{
let newUrl = webViewState.url
/*Your navigation logic*/
}
Reference
I have an static HTML page I want to pop up using Magnific Popup when the page loads. In the examples on the site he only shows clicking a link that has the url of the page. I don't want a link but just page load. How do I get the url to be called without a link? I have the onload figured out
$(window).load(function () {
$.magnificPopup.open({
type: 'ajax',
showCloseBtn: true
}, 0);
});
So for example I want test.html to show up in the popup onload. Not sure how this is done.
You can initialize the magnific popup with a DOM Element created by jQuery and then click it. For example:
$(function() {
$('<a href="test.html">').magnificPopup({
type: 'ajax'
}).click();
});
If you need the link appear in the page, then just use appendTo function after click.
i use casperjs for automatical click on twitter share button. Twitter use iframe for create this buttons:
<iframe src="some src">
</iframe>
When i click it open popup window, but when i trying to login into twitter, i got error, form not found
casper.withFrame(0) { //it twitter iframe
this.fill("#twitter-widget-0 form#update-form", {
"session[username_or_email]": "myemail#email.com",
"session[password]": "password"
}, true);
});
Why? It possible with casperjs?
I'm not familiar with Twitter widgets, but are you sure #twitter-widget-0 is not the id of the iframe you just switched in to? It seems that way, because I found code like this: https://dev.twitter.com/discussions/11450
If you switched into the iframe, you cannot access elements from the parent page anymore, and you are trying to access the iframe element, which resides in the parent.
You should just select form#update-form, because it's not a child element of #twitter-widget-0: it is just an element that is contained in the iframe.
If so, the solution is simply omitting #twitter-widget-0 from your selector inside the iframe.
casper.withFrame(0) { //it twitter iframe
this.fill("form#update-form", {
"session[username_or_email]": "myemail#email.com",
"session[password]": "password"
}, true);
});
I am using colorbox in my project to show application forms and if the user closes colorbox page the main window will be refreshed with this script:
$(".form").colorbox({
iframe: true,
innerWidth: 755,
innerHeight: 440,
overlayClose: false,
//main page refresh
onClosed: function () {
location.reload(true);
}
but after page refresh if the user clicks on colorbox link the screen looks like this.
Any help?
i have found the problem, and i write the solution for the developers who has the same problem like me;
in index page i call javascript first, than css. it was the problem. i call first css and after that javascripts the problem solved