Sharepoint scrollbars disabled in Chrome - sharepoint

On the page
https://connect.wels.net/AOM/schools/Pages/default.aspx
the scroll bars don't work (disabled) in Chrome. They are fine in other browsers. I would love to solve this. Sometimes it works in Chrome. Sometimes zooming in and out fixes it. Other times, it doesn't help.

This is answered at this site:
http://withinsharepoint.com/archives/256
The cause is in fact a timing issue around execution of a specific bit of very important onload JavaScript.
The bit that doesn’t execute (and causes a systemic issue, one of the issues it causes is the scrolling weirdness), is:
body onload="if(typeof(_spBodyOnLoadWrapper) != 'undefined'; _spBodyOnLoadWrapper();"
What this line means is basically if the page has loaded the onloadwrapper function from init.js. This onloadwrapper does a bunch of things, such as loading the ECMAScript for support SP.JS, executes page JavaScript for any onload events, and any client interactivity. So basically when this doesn’t execute pretty much no client side code from SharePoint can or will work, or any script that you have that relies on any of it. Scrolling is just the tip of the ice berg. Now for the good news, it’s easy to fix (I have a case in with Microsoft to look at including the fix in a future cumulative update).
Here's the fix that worked for me. Put this at the head of your master page. This will fix Chrome and Safari and also help your _spBodyOnLoadFunctionNames functions work.
https://gist.github.com/alirobe/4224245
via http://withinsharepoint.com/archives/256
if (jQuery.browser.webkit) {
jQuery(document).ready(function () {
var interval;
function loopCheck() {
if (typeof (_spBodyOnLoadWrapper) !== "undefined" && _spBodyOnLoadCalled == false)
_spBodyOnLoadWrapper();
else
window.clearInterval(interval);
}
// Give SP a chance..
setTimeout(function () { interval = window.setInterval(loopCheck, 30); }, 120);
});
}

That is the common problem with Chrome Browser in Sharepoint, as Sharepoint is supporting Limited Functionality to the Chrome Browser.
It also happens with the Javascript Loading order in Sharepoint page.
I cant find any solution for this till date
Refer this : https://answers.uchicago.edu/page.php?id=24860

Related

Sharepoint online navigation caching?

I am using Aplication Customizer to add jQuery and custom javascript to my page:
let current_date: Date = new Date();
let date_String: string = current_date.toString();
date_String = current_date.toISOString()
console.log('date_string = %s', date_String);
SPComponentLoader.loadCss('https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/caj23.css?d=' + date_String);
//SPComponentLoader.loadScript('https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/jquery-3.6.3.min.js?d=' + date_String)
//SPComponentLoader.loadScript('https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/caj23.js?d=' + date_String);
SPComponentLoader.loadScript('https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/jquery-3.6.3.min.js?d=' + date_String, {
globalExportsName: 'jQuery'
}).then(($: any) => {
$(function () {
console.log('jQuery is loaded');
});
SPComponentLoader.loadScript('https://8lbg15.sharepoint.com/sites/KnowledgeBase/SiteAssets/caj23.js?d=' + date_String, {}).then(() => {
//...do something
});
});
The code runs fine when I open the page. However, if I navigate to the page from the main site navigation (ie the mega menu) the code doesn't run. Yet if I click on the link a second time in the nav, it loads the page and the code runs.
In other words, it doesn't rung when you change pages via the nav, but if you load the same page (or reload the page with F5) it does!!!
Is this some kind of caching issue? I am using Sharepoint Modern/Online so there is no caching setting for the site.
Any solutions gratefully received.
According to your description, as far as I know, custom code is usually loaded when the entire page is refreshed. And the first time you enter the page via the navigation, the entire page refresh is not triggered, so no code does not take effect.
SharePoint Online works online. If you are worried that the cache has affected this matter, you can try to clear the cache of the browser, or switch to the private mode to see if the problem is resolved.
Seems to be a routing interceptor that will check your link and if appropriate, do a partial navigation, ie avoiding a full page load.
To work around and force javascript to run, add
data-interception="off"
to all links eg by script
$('a').attr("data-interception", "off");

Iframe Resizer - works on some pages but not others

I've tried all the troubleshooting suggestions, and I've got iFrameResizer working on other sites without any issues, but it's snagging on this one and I can't fathom out why. Weirdly, it works on the details page, but not on the listing page. Logging returns the
"hasn't responded in 5 seconds" message.
I've also tried all the various triggers ('max' etc.) none of them make a difference.
Example page where it doesn't work:
http://www.homesinfocus.co.uk/properties-to-let/
But on the details page, it does work:
http://www.homesinfocus.co.uk/property-details-let/?ID=790&LB=Let
I've made sure all the iFrames have unique IDs, and the listing page works okay for other sites, just can't see where the issue is with this one.
Any pointers would be much appreciated.
David, thanks for your help. CheckOrigin seems to have fixed it.
Seems to work fine with the following:
<script>
$(window).on('load', function (e) {
$('iframe').iFrameResize({checkOrigin:false});
});
</script>
The most common reason for that, is that the iframe hasn't loaded it's js file.
Also check that your using the very latest version, as the error message gives a bit more detail.

Passing urls from content to background

I'm quite new when it comes to creating extensions for Chrome and have the worst time trying to grasp concepts.
What I'm hoping to do, eventually, is create an extension which will highlight all links in a page which I currently have bookmarked.
I'm currently just trying to feel my way around, and looking to grab the links and pass them to the background page, but it doesn't seem to be working for me. When I attempt to pass a link I get nothing (or object {} and then a never-ending sea of arrows pointing to various things) If I pass something else, such as "hello", I can get that to work fine. I'd be grateful for some pointers, recommendations et al.
content:
// Get all the links on the page.
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
console.log(links[i]);
chrome.runtime.sendMessage(links[i]);
}
It does successfully return on links from the content script.
background
var links;
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
console.log(request);
});
My background script had more in it, but it didn't seem to help in any way so I've pared it back to the most basic of code.
While I would not doubt I'll have questions beyond this, the present issue is preventing me from progressing and I've not been able to figure out what (probably simple thing) I'm doing wrong.
Thanks kindly.
Thanks! Much appreciated. I'm now moving in the right direction.
For those of you (maybe one of you) wondering, it was solved simply by adding .href to the end of links[i].
eg;
chrome.runtime.sendMessage(links[i].href);

Detecting Google Chrome Browser Extensions

I was looking for a way to detect the browser extension I am building from my website and I need to alert my users in-case they are viewing my site without it. I have been able to do this in firefox, but I want to know is there a way I can do this in Google Chrome? Even if there is a hack to get this going I am fine.
Sure. Create a content script specific to you site in the extension, and make it add an invisible marker in the DOM, eg:
$('body').append('<div style="display: none;" class="extension_enabled" />');
In the page, set a short timeout to check for this after the document is fully loaded, eg:
$(function() {
setTimeout(function() {
if ($('.extension_enabled').length > 0) {
alert('Installed!');
} else {
alert('Not installed.');
}
}, 500);
});
NOTE: Code in jQuery format for simplicity. You can do it with raw javascript, of course.
The official Google Chrome Extensions Developers' Guide has an item covering exactly this.

Disabling Back button on the browser [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am writing an application that if the user hits back, it may resend the same information and mess up the flow and integrity of data. How do I disable it for users who are with and without javascript on?
It's not possible, sadly. However, consider your applications navigation model. Are you using Post/Redirect/Get PRG Model? http://en.wikipedia.org/wiki/Post/Redirect/Get?
This model is more back button friendly than the Postback model.
You shouldn't.
You could attach some script to the onbeforeunload event of a page and confirm with the user that's what they want to do; and you can go a bit further and try to disable it but of course that will only work for users who have javascript turned on. Instead look at rewriting the app so you don't commit transactions on each page submit, but only at the end of the process.
I strongly urge you to go to heroic lengths to prevent breaking the back button, it is a sure fire way to alienate your users and even made it to No.1 on Jacob Neilsen's Top 10 Web Design Mistakes in 1999.
Perhaps you could consider rather asking the question: "How to avoid breaking the back button for <insert your scenario here>?"
If Scott's answer hits close to the mark, consider changing your flow to the PRG model. If it's something else, then give a bit more detail and see how we can help.
I came up with a little hack that disables the back button using JavaScript. I checked it on chrome 10, firefox 3.6 and IE9:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<title>Untitled Page</title>
<script type = "text/javascript" >
function changeHashOnLoad() {
window.location.href += "#";
setTimeout("changeHashAgain()", "50");
}
function changeHashAgain() {
window.location.href += "1";
}
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
window.location.hash = storedHash;
}
}, 50);
</script>
</head>
<body onload="changeHashOnLoad(); ">
Try to hit back!
</body>
</html>
Best option is not to depend on postbacks to control flow, however if you are stuck with it (for now)
you may use something like this:
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetExpires(Now.AddSeconds(-1));
Response.Cache.SetNoStore();
Response.AppendHeader("Pragma", "no-cache");
Soon you will find that it will not work on all browsers, but then you may introduce a check in your code like:
if (Page.IsPostBack)
{
if (pageIsExpired()){
Response.Redirect("/Some_error_page.htm");
}
else {
var now = Now;
Session("TimeStamp") = now.ToString();
ViewState("TimeStamp") = now.ToString();
}
private boolean pageIsExpired()
{
if (Session("TimeStamp") == null || ViewState("TimeStamp") == null)
return false;
if (Session("TimeStamp") == ViewState("TimeStamp"))
return true;
return false;
}
That will solve problem to some extend, Code not checked -- only for examples purposes..
It is possible to disable back button in all major browser. It just uses hash values to disable the back button completely.
Just put these 5 lines of code in your page
<script>
window.location.hash="no-back-button";
window.location.hash="Again-no-back-button";//for google chrome
window.onhashchange=function(){window.location.hash="no-back-button";}
</script>
Detailed description
Here's a previous post on it:
Prevent Use of the Back Button (in IE)
Whatever you come up with to disable the back button might not stop the back button in future browsers.
If its late in the development cycle I suggest you try some suggestions above but when you get time you should structure your flow so that the back button does not interfere with the logic of your site, it simply takes the user back to the previous page like they expect it to do.
It is true, proper validation should be added to make sure duplicate data doesn't mess things up. However, as in my case, I don't full control of the data since I'm using some third party API after my form. So I used this
history.go(+1);
This will send user forward to the "receipt" which is supposed to come after "payment" page if they try to go back to "payment" page (just giving a payment for example). Use sparingly, though
You could post the data on each form to a _NEW window. This will disable the back button on each window, but without javascript it might be difficult to force the old one closed.
I was able to accomplish this by using:
Response.Cache.SetExpires(DateTime.MinValue);
Response.Cache.SetNoStore();
When I used Response.Cache.SetCacheability(HttpCacheability.NoCache); it prevented me from downloading office files.
Find below link
Disable browser back button functionality using JavaScript in asp.net | ASP.Net disable browser back button (using javascript)
http://www.aspdotnet-suresh.com/2011/11/disable-browser-back-button.html

Resources