javascript code onscroll in blazor not working - javascript

In a Blazor app I have a script.js file in wwwroot/js/script.js.
The javascript should call the scrollFunction while scrolling inside the app, but "Hello World" never comes up.
Why this javascript function is not called when I scroll up and down the page?
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
window.alert("Hello World");
}
At the wwwroot/index.html I call this js file:
... <body>
<script src="js/script.js"></script> ...
at the _Imports.razor I added..
#using Microsoft.JSInterop
PS:
When I set in index.html
<head> ...<script>window.alert("Hello You");</script> ... </head>
or
<script>onmousedown = (event) => { window.alert("Click") };</script>
I get the Message.
But when I set
<script>window.onscroll = function () { window.alert("Hello World") };</script>
or
<script>onscroll = (event) => { window.alert("Scroll") };</script>
and scroll, I never get the message. The Problem is only with onscroll.

Related

Nested Iframe doesn't have content after reload on Mozilla

I have this problem on Mozilla (worked perfectly on Chrome) where the nested Iframe doesnt have content after reload (only empty header and body tag)
Somehow you can click on the search bar and enter (instead of reload) to open again and all iFrame will load as intended
---------Working Snippet---------
https://codesandbox.io/s/determined-edison-9rwhwv?file=/index.html
Body index.html
<body>
<div>Index</div>
<iframe id="iframe"></iframe>
<script>
(function () {
var b = document.getElementById("iframe");
b.setAttribute("src", "iframe.html?" + Math.random() * 100);
})();
window.addEventListener('beforeunload', function (event) {
console.log('I am the 1st one.');
});
window.addEventListener('unload', function (event) {
alert('unLoad')
});
</script>
</body>
body iframe.html
<body>
<header>
IFRAME1
</header>
<iframe id="iframe2"></iframe>
<script>
(function () {
var b = document.getElementById("iframe2");
b.setAttribute("src", "iframe2.html?" + Math.random() * 100);
})();
window.addEventListener('beforeunload', function (event) {
console.log('frame 1 before unload.');
});
window.addEventListener('unload', function (event) {
console.log('frame 1 unload.');
});
window.addEventListener('pagehide', (event) => {
if (event.persisted === true) {
console.log('This page *might* be entering the bfcache.');
} else {
console.log('This page will unload normally and be discarded.');
}
});
</script>
</body>
Body iframe2.html
<body>
<header id="h2">
this is iframe 2
</header>
<script src="iframe2.js"></script>
</body>
I read something about bfcache, which is why i tried to put unload event to negate bfcache.
Found this thread with help from zer00ne about mixed content
Mixed Content warning on Chrome due to iframe src
But this seems to be a security issue to do
I got it working by calling the function after load event
window.addEventListener('load', function () {
function setIframe() {
var b = document.getElementById("iframe");
b.setAttribute("src", "iframe.html");
}
setIframe();
})
Hope this helps anyone.

window.onload Not Triggering in Injected Javascript?

I have a chrome extension that injects javascript code into a webpage like so
if (document.readyState === "complete") {
const html = `
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
console.log(location.href);
function doStuff() {
console.log("do stuff");
}
console.log("onload");
window.onload = function () {
console.log("WINDOW LOADED");
doStuff();
}
</script>
</body>
</html>
`;
document.write(html);
}
However, after I navigate to the page and the extension injects the javascript, I can see in the console that it does log location.href and onload, but the window.onload does not trigger, and I do not see WINDOW LOADED in the console, nor is doStuff() called.
I have also tried using
window.addEventListener('load', (event) => {
console.log('page is fully loaded');
});
as well as
document.addEventListener('DOMContentLoaded', doStuff);
to no avail.
Any help would be appreciated, I have not been able to find anything that works.
I managed to fix this by including at the top of my <script>
setTimeout(() => {
let evt = document.createEvent('Event');
evt.initEvent('load', false, false);
window.dispatchEvent(evt);
}, 300);
And this now causes window.onload to trigger. hope this helps anyone with the same issue

How to work with external JS file in Signal r

I have the following signal r client code on my razor partial view
It is working fine in partial view. I want to move it to an external javascript file.
<script type="text/javascript">
$(function () {
debugger;
$.connection.hub.logging = true;
var proxy = $.connection.broadcastMessage;
proxy.client.receiveNotification = function (message, count) {
debugger;
$("#not_count").html(count);
$("#not_count").show();
};
$.connection.hub.start();
});
</script>
How can i move this to an external JS file?
Add new javascript file(eg. signalrStuff.js) to solution with your code:
$(function () { debugger; $.connection.hub.logging = true; var proxy = $.connection.broadcastMessage;
proxy.client.receiveNotification = function (message, count) {
debugger;
$("#not_count").html(count);
$("#not_count").show();
};
$.connection.hub.start();
});
Then reference the new script replacing the javascript in the partial view:
<script src="signalrStuff.js" type="text/javascript"></script>
Make sure to load the jQuery script first.

Calling functions from different javascript files causing "undefined is not a function"

I'm trying to make some small changes to an existing vb.net website that was written by someone who no longer works for the company, but every time a javascript function is called from a script file other than the one it's defined in, I see "Uncaught Reference Error: undefined is not a function" in Chrome's console.
Some of the scripts are being loaded in the master file:
<script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>
<script type='text/javascript' src="Scripts/JSExtensions.js"></script>
<script type='text/javascript' src="Scripts/GlobalUtilityFunctions.js"></script>
<script language="javascript" type="text/javascript">
jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);
function resizeFrame() {
}
</script>
And the rest are loaded in the page itself:
<script type='text/javascript' src="Scripts/GridCalcFunctions.js"></script>
<script type='text/javascript' src="Scripts/InputEventHandlers.js"></script>
<script type='text/javascript' src="Scripts/FocusHandlers.js"></script>
<script type='text/javascript' src="Scripts/ProjectPageFunctions.js"></script>
<script type="text/javascript">
$(document).ready(function () {
});
$(window).unload(function () {
SaveOnExit();
});
function setPIDNumberLabel(ctlID, strVal) {
var val = strVal;
var ctl = top.$get(ctlID);
if (ctl != null) {
ctl.innerHTML = val;
}
}
</script>
GlobalUtilitesFunctions has no trouble accessing JSExtensions on other pages, but does here even though both are loaded in the master. I thought that must mean that the problem is caused by one of the files loaded on this page, but commenting them all out doesn't fix the issue.
As a specific example, GlobalUtilitiesFunctions contains this:
function GetAttributeSelector(attName, attValue, attOperator,attNot) {
attOperator = String.deNullValue(attOperator, "=");
[more code]
}
And I get an error that String.deNullValue is undefined, but over in JSExtenstions is:
String.iifValueIsNullOrEmpty = function (val, trueVal,falseVal) {
falseVal = String.getArgValue(falseVal, val);
if (String.isNullOrEmpty(val)) {
return trueVal;
}
else {
return falseVal;
}
}
String.deNullValue = function (val,defaultVal) {
var ret = "";
defaultVal = String.iifValueIsNullOrEmpty(defaultVal,"");
ret = String.iifValueIsNullOrEmpty(val,defaultVal);
return ret;
}
I've also tried running the site on a server (instead of inside Visual Studio) without solving the problem. Does anyone have an idea what might be causing this?
Here you can see this:
"A variable declared (using var) within a JavaScript function becomes LOCAL to the function.
The variable gets a local scope: It can only be accessed from within that function."
try to define functions like
function deNullValue(val,defaultVal) {
var ret = "";
defaultVal = String.iifValueIsNullOrEmpty(defaultVal,"");
ret = String.iifValueIsNullOrEmpty(val,defaultVal);
return ret;
}

Javascript not executing when right clicked into new tab

Here is my simple code
function goto() {
/* Some code to be executed */
if (a == "1")
location.href = "http://www.google.com";
else
location.href = "http://www.example.com";
}
And here is html
Hello
this works perfectly fine when i click normally but if i right click it and open in a new tab it doesn't execute.
try this:
Hello
function goto() {
/* Some code to be executed */
window.open("http://www.google.com");
}
if you want to open in new tab on mouse right click,
Hello
hit mouse right click and open in new tab
OR
u can try this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
function goto() {
window.location = "http://www.google.com";
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementsByTagName('a')[0].addEventListener('contextmenu', function (ev) {
ev.stopPropagation();
ev.preventDefault();
goto();
});
document.getElementsByTagName('a')[0].addEventListener('click', function (ev) {
goto();
});
}, false)
</script>
</head>
<body>
Hello
</body>
</html>
Try something like this:
Hello
<script>
document.getElementById('myId').addEventListener('contextmenu', function(ev){
gotoFunc(ev);
});
function gotoFunc(ev){
//run this when right clicked over #myId element
}
</script>
do it like this:
function changeDest(elem) {
/* Some code to be executed */
if (a == "1")
elem.href = "http://www.google.com";
else
elem.href = "http://www.example.com";
}
Hello
you can instead use Hello
This should do the trick. i.e adding the url to the href of the anchor tag

Categories