I'm trying to pre fill in fields to log in to a forum. However, I don't own the forum. So how do I link my own .js file so that I can fire a function that will pre fill the log in fields?
(Remember I don't own the servers that host the html files, so I cannot hook it up via HTML.)
You can inject your own javascript into a page being displayed by a UIWebView by
1) Put your javascript into a file in your app bundle, for example something like this will inject myFunction().
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = function myFunction()
{
alert("my function");
};
document.getElementsByTagName('head')[0].appendChild(script);
2) Load the .js file and run it using stringByEvaluationJavaScriptFromString:
3) If its important your myFunction() doesn't get added until the dom has loaded, then within the same .js file add some other JavaScript that will ensure that the code in part 1) doesn't get run until you get a dom loaded event.
cross domain javascript fails everytime.
use ajax to retrieve the page you wish.
$(document).ready(function(){
jQuery.ajax(’forumlogin’).done(function(data)
{
$(’body’).html(data)
})
})
then fill in the forms using the forms element.
Related
I've a Progressive web app that is added on my home screen. I've chosen standalone run type, I've a service-worker running in it.
All working perfectly, only one doubt: if I update my site (with its relative service-worker, I can see updates if I load it directly into browser, but if I launch it by home added link I see always the old site.
There is a way to request updates when launching my site in standalone mode?
I think you are asking "is there a way to dynamically update my precached assets without updating my service worker?"
Yes!
I have been working on an upgrade to the JSON cache strategy here -> https://serviceworke.rs/json-cache.html We will publish this soon!
After digging I've discovered the simple solution, I report it for others.
iOS does not support service-workers, so that is not the problem.
iOS keep in cache many resources, so the solution is to add a parameter to the various imports like so:
The best solution to ensure updates is to add an hash of imported as the parameter.
Alternatively we can use a timestamp to ensure that resources are ALWAYS updated.
To attach this parameter we can import these resources injecting them with javascript, like so
/**
* inietta uno script nella pagina
*/
function appendScript(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.async = false; // async false to wait for previous file loading
head.appendChild(script);
}
// create parameter with date
var currVersion = '?v=' + new Date().getTime();
// get head html element
var head = document.getElementsByTagName("head")[0];
// append script
appendScript('app.js' + currVersion);
// append css
head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" type="text/css" href="style.css' + currVersion + '">');
Im trying to load my script tag or some jquery function after page is completely loaded in vaadin. Im using javascript annotation to load my external js. like this
#JavaScript("vaadin://themes/custom/resources/js/custom.js");
Is there any way out for this to call some js function after page load or dom object created in html.
Yes, there is. Try this approach:
import com.vaadin.ui.JavaScript;
...
StringBuilder script = new StringBuilder();
script
.append("var head = document.getElementsByTagName('head')[0];")
.append("var script = document.createElement('script');")
//...do other stuff to set up the "script" tag (add content, source, whatever)
.append("head.appendChild(script);");
JavaScript.getCurrent().execute(script.toString());
If you do this before the page is fully loaded, then all is good. But if you want to do this after the fact (through some event or click listener), you'll also have to use Vaadin push to push this to the JavaScript to the client. Like so:
import com.vaadin.ui.UI;
...
UI.getCurrent().access(new Runnable()
{
#Override
public void run()
{
//code from above that leads to JavaScript.getCurrent().execute(...)
UI.getCurrent().push();
}
});
And of course, this assumes that you have push enabled in your Vaadin application. Reference https://vaadin.com/book/-/page/advanced.push.html
As per the docs, add the following in your custom.js
$(document).ready(function() {
//call your function
});
I'm trying to override a JS function named replaceMe in the web page from my add-on's content script, but I see that the original function implementation always gets executed.
Original HTML contains the following function definition:
function replaceMe()
{
alert('original');
}
I'm trying to override it my add-on like (main.js):
tabs.activeTab.attach({
contentScriptFile: self.data.url("replacerContent.js")
});
Here's what my replacerContent.js looks like:
this.replaceMe = function()
{
alert('overridden');
}
However, when I run my addon, I always see the text original being alerted, meaning the redefinition in replacerContent.js never took effect. Can you let me know why? replaceMe not being a privileged method, I should be allowed to override, eh?
This is because there is an intentional security between web content and content scripts. If you want to communicate between web content and you have control over the web page as well, you should use postMessage.
If you don't have control over the web page, there is a hacky workaround. In your content script you can access the window object of the page directly via the global variable unsafeWindow:
var aliased = unsafeWindow.somefunction;
unsafeWindow.somefunction = function(args) {
// do stuff
aliased(args);
}
There are two main caveats to this:
this is unsafe, so you should never trust data that comes from the page.
we have never considered the unsafeWindow hack and have plans to remove it and replace it with a safer api.
Rather than relying on unsafeWindow hack, consider using the DOM.
You can create a page script from a content script:
var script = 'rwt=function()();';
document.addEventListener('DOMContentLoaded', function() {
var scriptEl = document.createElement('script');
scriptEl.textContent = script;
document.head.appendChild(scriptEl);
});
The benefit of this approach is that you can use it in environments without unsafeWindow, e. g. chrome extensions.
You can then use postMessage or DOM events to communicate between the page script and the content script.
Unable to call jquery functions in $viewContentLoaded event of Angular controller, here is the code for the same.
$scope.$on('$viewContentLoaded', function() {
jQuery.growlUI('Growl Notification', 'Saved Succesfully');
jQuery('#category').tree()
});
Is any configuration required here?? I tried even noConflict(); var $jq = jQuery.noConflict();
Does it require any other configuration?
Thanks,
Abdul
First thing first, don't do DOM manipulation from controller. Instead do it from directives.
You can do same thing in directive link method. You can access the element on which directive is applied.
Make sure you load jquery before angularjs scripts, then grawlUI, three, angularJS and finally your application script. Below is directive sample
var app = angular.module("someModule", []);
app.directive("myDirective", function () {
return function (scope, element, attrs) {
$.growlUI('Growl Notification', 'Saved Succesfully');
element.tree();
};
});
angularjs has built in jQuery lite.
if you load full jquery after angular, since jQuery is already defined, the full jquery script will skip execution.
==Update after your comment==
I reviewed again your question after comment and realised that content which is loaded trough ajax is appended to some div in your angular view. Then you want to apply element.tree() jquery plugin to that content. Unfortunately example above will not work since it is fired on linking which happened before your content from ajax response is appended to element with directive I showed to you. But don't worry, there is a way :) tho it is quick and dirty but it is just for demo.
Let's say this is your controller
function ContentCtrl($scope, $http){
$scope.trees=[];
$scope.submitSomethingToServer=function(something){
$http.post("/article/1.html", something)
.success(function(response,status){
// don't forget to set correct order of jquery, angular javascript lib load
$.growlUI('Growl Notification', 'Saved Succesfully');
$scope.trees.push(response); // append response, I hope it is HTML
});
}
}
Now, directive which is in controller scope (it uses same scope as controller)
var app = angular.module("someModule", []);
app.directive("myDirective", function () {
return function (scope, element, attrs) {
scope.$watch("trees", function(){
var newParagraph=$("<p>" + scope.trees[scope.trees.length-1] + "</p>" ); // I hope this is ul>li>ul>li...or what ever you want to make as tree
element.append(newParagraph);
newParagraph.tree(); //it will apply tree plugin after content is appended to DOM in view
});
};
});
The second approach would be to $broadcast or $emit event from controller (depends where directive is, out or in scope of controller) after your ajax completes and you get content from server. Then directive should be subscribed to this event and handle it by receiving passed data (data=content as string) and do the rest as I showed you above.
The thing is, threat that content from ajax as data all the way it comes to directive, then inject it to element in which you want to render it and apply tree plugin to that content.
I have a multi-page document and I'm binding to the pageshow event of page "myId":
$('#myId').live('pageshow', renderMyIdTempalates);
I'm applying my JSON templates with PURE like this
function renderMyIdTempalates(event) {
$.mobile.showPageLoadingMsg();
var $page = $("#myId");
// do ajax call
$page.children( ":jqmData(role=header)" ).directives(...).render(data);
$page.children( ":jqmData(role=content)" ).directives(...).render(data);
$.mobile.hidePageLoadingMsg();
}
Initially I was using
$('#myId').directives(...).render(data);
to apply my templates. This caused problems since the selector didn't include the jqm attributes. So I used the jqmData method to grab the header and content to apply my templates. This works fine, but how do I select the entire document that I'm working with? I would prefer to apply my templates to the entire document once.
I tried:
$(":jqmData(role=page)") // selects all pages
$(":jqmData(id=myId)") // no luck
Any ideas?
the selector
div:jqmData(id="myID")
should work. just remember that myID should not be the id of that div.That page div should have a parameter data-id="myID"