I just found Framework7 and it looks promising as a base for mobile apps.
From navigation tabs I can load a Component Page which has dynamic data. But this data is only set when the application is loaded.
Wanted:
Every time user clicks on tab, load data and render page.
Question:
How can I make a component page load every time?
I have made an example from framework7-template-tabs. Check console showing when pageInit is called.
Live:
http://f7-navigate-component-question.surge.sh/
Code:
https://github.com/gotling/framework7-tab-component-page-question
If you want some action to happen every time a particular tab is clicked/loaded, you can use the show event of the tab, documented here.
For example, to alert something every time tab2 is loaded, you could do this
$$("#tab2" ).on( "show", function( event, ui ) {
myApp.alert("Tab loaded!");
} );
I got the answer in the Framework 7 forum.
Listen to page show events:
$('#view-catalog').on('tab:show', ...
Refresh the page:
$('#view-catalog').on('tab:show', function () {
catalogView.router.navigate(catalogView.router.currentRoute.url, {
reloadCurrent: true,
ignoreCache: true
});
});
If using Framework7 2.0.6 or newer that could have been simplified with:
$('#view-catalog').on('tab:show', function () {
viewCatalog.router.refreshPage();
});
Related
I'm trying to do something when a web browser has loaded a new web page.
my code in background.js is here.
chrome.history.onVisited.addListener(function(details) {
console.log('onVisited is fired: '+details.url);
});
Unfortunately, console outputs 'onVisited is fired: xxxxx' multiple times per a single event.
help me. plz.
Let me preface this by saying I want a spinner...
I don't necessarily care whether it loads when the page first starts up, or later. The problem I'm experiencing also doesn't seem to care, as I've tried it both ways.
Right this moment, I don't declare it at the top of the page. Because I have a lot of visualization stuff going on, I start that up and immediately pass some info to the spinner (which also starts it up):
google.load('visualization', '1', {packages:['controls'], callback: initializeTables});
function initializeTables() {
provideInfo("loading proficiencies (Step 1/12)");
//etc... }
function provideInfo(text) {
$.mobile.loading( "show", {
text: text,
textVisible: true
});
}
So that starts... fine... ish...
The problem is that there's actually two spinners started when that starts - one in front, one behind. Because the one in front is slightly offset from the one behind, I can see both.
If I later call:
$.mobile.loading( "hide" );
It only hides the front one, not the back one.
I've found I can hide both by saying:
$(".ui-loader").hide();
Which is great. But, I'd like to not see two in the first place. I've tried to puzzle out the jquery mobile documentation page, to no avail (it also mentions a "global method docs" but I haven't been able to find that link):
//This does not work:
$( ".ui-loader" ).loader( "option", "text", "Loading Page..." );
//Nor does this:
$( "#notify_div" ).loader( "show" );
$( "#notify_div" ).loader( "option", "text", "Loading Page..." );
Anyone know how to get it all into one spinner, or why it's loading two?
Sadly, the current JQM documentation is for the 1.5 version which hasn't be released yet. You need to look directly at the source code of the 1.4.5 version.
There is a JQM default which is showing the spinner when a page is loading. You can override this behavior at JQM initialization.
<script type="application/javascript" src="js/jquery-2.2.4.js"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.changePage.defaults.showLoadMsg = false;
});
</script>
<script type="application/javascript" src="js/jquery.mobile-1.4.5.js"></script>
If You look at line 5847 of the JQM uncompressed source code, You will find all the configurable settings for that.
Moreover, just for the sake of completeness, there is another setting where You can tell JQM to not show the spinner for already cached pages. Just look at line 5122 of the JQM uncompressed source code:
// This delay allows loads that pull from browser cache to
// occur without showing the loading message.
loadMsgDelay: 50
Hope this help.
I'm trying to display some information on an HTML web page when the viewer loads the web page. I have a function, called getID(email), that returns an integer. I know that this works, as I've tested with console and it works properly. My issue is being able to display the return of getID() onto the web page when the page loads.
I know that I have to use document.getElementById('div id goes here').innerHTML('content goes here'); to change what a div says, but for the life of me I can't get the actual information.
Here's what I have:
<div id='output'>
</div>
<script>
function showId() {
var id = google.script.run.getId(Session.getActiveUser().getEmail());
document.getElementById('output').innerHTML(id);
</script>
I have no idea how to make this run when the HTML page is loaded. Help is appreciated!
You can just put the script on the bottom of the page and call the showId function:
<script>
// you can define showId here
showId();
</script>
If you can't put the script at the very end or you expect to be using other scripts and want to only execute after everything is loaded you can just wait for the DOMContentLoaded event:
window.addEventListener('DOMContentLoaded', function() {
function showId() {
// ...
}
showId();
});
I'm building a devtool extension and would like to inject my script again when the current page navigates to a different page:
chrome.webNavigation.onDOMContentLoaded.addListener(function(object details) { ... });
I have been on this for several days now but I can't figure out where to place the codes. Im using this template at github: https://github.com/thingsinjars/devtools-extension
I can listen to and inject script and execute scripts from the content script but I can't figure out how to listen for tab url change and inject my code/script into the next page.
I'm also, writing an extension, and even though I'm also stuck for a couple of days on a communication issue, I think I can help you to understand a little more:
First: the js file associated with the devtools will be tied with the page the devtools is currently inspecting (when I say tied it means that the related to each other, but they don't share the same context or access to google's extension api).
Second: the background page runs on its own sandbox environment and keep one instance per extension, what means that your panel my have multiple instances on different pages, but they all share the same background page.
Now to try to answer your question:
Your panel script (often called devtools.js) should send a message to your background page informing that it should start tracking the navigation of tabs, and your background page should listen for messages from any open panel of your extension and perform the necessary actions ( start tracking navigation of needed tabs and inject script after page loading):
devtools.js
chrome.runtime.sendMessage( {
message: 'track-navigation',
of: chrome.devtools.inspectedWindow.tabId
} );
background.js
var trackedTabs = [];
function injectScript( details ) {
if ( trackedTabs.indexOf( details.tabId ) ) {
chrome.tabs.executeScript( details.tabId, { file: 'include/some-script.js' } );
}
}
function trackNavigation() {
chrome.webNavigation.onDOMContentLoaded.addListener( injectScript, {
// here I've included some filtering in order to restrict urls to listen to
url: [
{ hostContains: 'www.sample.com', ports: [80, 443] },
{ hostContains: 'www.sample.local', ports: [80, 443] }
]
} );
}
chrome.runtime.onMessage.addListener( function( request, sender, sendResponse ) {
switch ( request.message ) {
case 'track-navigation':
trackedTabs.push( request.of );
trackNavigation();
break;
}
} );
While there are other ways of accomplishing the same thing (such as sending a message from the page being tracked where it is about to load, so you don't have to track pages being loaded on the background script); I think this should help you with your question.
I've made an extension who's purpose is to redirect urls.
I.e: www.google.com becomes: www.mysite.com/?url=www.google.com
I came across this post:
How to modify current url location in chrome via extensions
The problem I'm having is that the url's are both processed. The tab initially loads up google.com and only after it's finished my request is shown ( www.mysite.com/?url=www.google.com).
Is there any way to stop the initial request from being processed?
Something like:
chrome.tabs.onUpdated.addListener(function(tabId,obj,tab){
update.stop() // ??????????? Here I'm missing...
chrome.tabs.update(tabId,{url:....}, function callback); // My update stuff..
});
Thoughts?
thank you all.
You're looking for the webNavigation API.
You can register listeners to handle user navigation by modifying or blocking the request on the fly.
In the example below, when a user navigate to www.google.com, before the page even start loading onBeforeNavigate is fired and you can redirect the user to the CSS validation page for that URL:
chrome.webNavigation.onBeforeNavigate.addListener((details) => {
if(details.url.indexOf("www.google.com") !== -1)) {
chrome.tabs.update(details.tabId, {
url: "https://jigsaw.w3.org/css-validator/validator?uri=" + details.url
});
}
});
Remember to add the "webNavigation" permission to your extension manifest to get this functionality enabled.
chrome.tabs.onUpdated is fired two times per tab load - once a tab starts loading, and another time when it finishes loading. If you attach your update to the tab start loading event then it should work relatively quickly. You will still see original url being loaded for a brief moment, but it won't wait until it finishes, as you are describing.
chrome.tabs.onUpdated.addListener(function(tabId,obj,tab){
if(obj.status == "loading") {
chrome.tabs.update(tabId,{url:....}, function callback);
}
});
I don't think there is a more efficient solution at the moment.