Develop Reference

Best (and secure) way to call javascript function (with arguments) using a url from another page

After reviewing dozens of Stack Overflow posts, I'm thoroughly confused. What I am trying to do is create a URL through an tag on one page that would open another webpage and run a function that requires two arguments. I thought this would be simple but I keep seeing references to "cross site scripting vulnerabilities" and I am not familiar with this potential security problem and feel like I am now playing with fire. I do not want to utilize something — even if the code works — if it opens up security risks. Could someone point me in the right direction with the correct (and most secure) way to do this? I can do my research (and learning) from there. Much appreciated.

For example you can append some parameter at the end of your URL
https://your-url/?parameter=hello
When this URL is opened on another webpage you can run JavaScript or a PHP function based on that URL query.
For JavaScript
getUrlParam(slug) {
let url = new URL(window.location);
let params = new URLSearchParams(url.search);
let param = params.get(slug);
if (param) {
return param;
} else {
return false;
}
}
console.log(getUrlParam('parameter'));
After that, you can run this function to check if any parameter is passed in that URL or not.
If this function returns that's given slug parameter you can run your custom code inside that if condition block

How to calculate page load time of a website which includes the total time and not just document.ready() time? [duplicate]

This question already has answers here:
Chrome: API for performance data
(2 answers)
Closed 4 years ago.
I was trying to write a function either in Javascript or in Python using Selenium to calculate the page load time of a website. document.ready() will only give the DOM load time but there might be some AJAX calls which cannot be detected using document.ready().
There is even an extension in chrome web store named 'Page Load Time', which will calculate the total time, as per my requirements. How do I replicate same kind of functionality?

You can use load like as follows.
$(window).load(function() {
//code in here
});
See jQuery docs here. Also, another answer that will show you how to set up a page timer can be found here.

driver.execute_script("return $.active == 0") should help you.
$.active returns the number of active Ajax requests. Link

You can try it with selenium and with execute_script method, we will get information from window.performance.timing, it will return the milliseconds, but if we divide it by 1000 we will get the seconds of the loaded page.
from selenium import webdriver
driver=webdriver.Chrome()
driver.get("https://example.com")
load_time = driver.execute_script(
"""
var loadTime = ((window.performance.timing.domComplete- window.performance.timing.navigationStart)/1000)+" sec.";
return loadTime;
"""
)
print(load_time)
Output
# something like this
0.803 sec.

Jquery code to check internet connection and change the button as per result [duplicate]

This question already has answers here:
How to detect online/offline event cross-browser?
(15 answers)
Closed 8 years ago.
Jquery Code which check the internet/network is there or not(mobile/PC/Tablet).It must just check on page load.I thinkAjax will good because Ajax will check after certain interval.
I am looking just like http://tomriley.net/, But it is plugin, I am looking for simple jquery/Javascript.
Its static page which check system internet only.
Any idea is appreciated.

You might try a $.ajax() invoication with a .fail() handler, for example JQuery's getJSON():
var network_available; // bool
var url = '/some/json/call'; // must be relative to the site that
// you are already addressing
$.getJSON(url, function(data) {
network_available = true;
})
.fail(function() {
network_available = false;
});
Though I doubt this will solve all of your problems. The Javascript engine won't allow 'foreign' URL's, just the domain that the script or page was received from. So you'd not be really testing network availability, but also whether your site is up and responding within a reasonable time.

Suppressing HTMLImageElement onerror [duplicate]

This question already has an answer here:
Check if file exists but prevent 404 error in console from showing up [duplicate]
(1 answer)
Closed 8 years ago.
I'm running a script that is dynamically loading images depending on a few criteria. The script does not know beforehand whether a specific image source actually exists and will thus need to check before displaying the image. I do this by replacing the onerror handler on the element with a function that attempts to gracefully handle the event.
At first glance this works rather well, however even though I have replaced the event, the browser still audits 404 errors in the console which I don't want. Even worse is that IE displays the infamous JS error icon in the status bar which I find rather awkward.
I've tried to summarise the problem in a JSFiddle.
var img = new Image();
img.onerror = function (ev) {
alert("This does not exist!");
return true;
}
img.onload = function (ev) {
document.body.appendChild(this);
}
img.src = "foo.png"; //Missing image
Basically, I want to suppress all error reporting for this element such that the console doesn't get flooded with superfluous error output.
I know that I could solve this by prefetching and evaluating the HTTP headers with AJAX and server side scripting, which while technically a possible solution, is something I would prefer to avoid. However, while I only use standard JS in my example, JQuery code is also acceptable.
I have tried reading up on the event specification, but since web scripting is still the mess of confusing ECMAScript, HTML DOM, client, pixy dust and now HTML5 definitions that we all love to hate, it really didn't make me any wiser. The closest I got was Mozilla's documentation (that interestingly doesn't even state the correct function parameters) which suggested that letting the event return true would suppress errors, but that didn't really work.

I believe you can not check if image link is broken/does not exist without getting 404 error. Which is actually is information about link is broken.
You mentioned that other way is ajax to check existance...
function UrlExists(url) {
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status != 404;
}
UrlExists('img_url');
but still you will get 404 in console.

Functions() out of iframe? [duplicate]

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Is it possible to call Javascript function in parent document from JS in iframe?
I have a main.php page.
This contains an iframe which src is random.php.
How can I have script in the main.php with a random function, random(), and let random.php use that function?

If you are working with HTML5, you can use the postMessage() function..
here is a nice demo:
http://html5demos.com/postmessage
UPDATE
The idea is to postMessage to the iframe window object, each window is listening to the message event like so:
In your main.php:
window.addEventListener("message", function(e){
var data = e.data; // data can be any object for example { type: 'random', payload: {}... }
switch(data.type){
case 'random':
// do somthing here with the payload...
break;
}
});
in your iframe (random.php):
window.parent.postMessage({ type: 'random', payload: {...} });

You can call the function random in the page that contains the iframe using window.parent.random(). If you want to do the opposite, namely calling a function in an (i)frame from a containing page, you should use [DOM Reference to frame].contentWindow.random() instead.
↪ More information about window.parent at the Mozilla Developer wiki
If random.php is at a different domain, you can't do this because of the Same Origin Policy. If that's the case, you can use HTML5 postMessage to transfer information across pages*. This does not allow you to directly call functions of a different domain's JavaScript, however.
* See Can I use for browser support information