I've a project in Java, with Java Script to manage site. I had a function to open help dialog popup window. When I refresh main page, a popup window don't close and it's still open. I have a protection, that you can open 2 windows with help, but it's working with handler (helpWnd), at it's loosing when refresh main page.
Sorry for my English; )
var helpWnd = null;
// Open help dialog with url from recived helpId
function openHelpDialog(helpId, height, width, title) {
var url;
if(helpId == "contact") {
url = "help/contact.html";
} else {
var regularExpression = /[a-zA-Z][a-zA-Z][a-zA-Z][0-9][0-9][0-9][0-9]/;
if(helpWnd!=null) {
helpWnd.close();
}
url = "help/index.html?"+helpId.toLowerCase()+".html";
if(!regularExpression.test(helpId)) {
url = "help/index.html";
}
}
helpWnd = window.open(url, title, 'width=1000, height=600, menubar=no, toolbar=no, location=no, scrollbars=yes, resizable=yes, status=no');
}
//this refresh main page
function changeRole(roleName,redirectUrl) {
dojo.xhrPost({
content: {
role: roleName
},
handleAs: "json",
sync: true,
url: 'someUrl.npi',
load: function (response) {
dojo.cookie(response.cookieHash, response.role, {expires : response.cookieExpiryTime});
document.location.href = redirectUrl;
}
});
}
Opening windows is considered harmful in many occations, as you might have found out yourself.
A better alternative is using modal dialogs with javascript, which is essentially a layered dialog in the same page. I'm not a Dojo expert but I quickly found documentations with Google (http://dojotoolkit.org/reference-guide/1.7/dijit/Dialog.html)
Anyway, if you still want to go for opening windows you might get better behaviour if you make sure it gets focused. Take a look here: http://www.quirksmode.org/js/popup.html
Related
I am trying to open a new window and then detect when that window has closed. But so far nothing I have tried is working. I have the following:
methods: {
submitForm: function(e) {
var newWindow = window.open('https://www.google.com', '_blank')
newWindow.onblur = this.windowClosing
}
windowClosing: function () {
console.log('tab closing')
}
}
The tab/window opens and what I would like to see is the "tab closing" in the parent window. I assume it might be writing it to the newWindow and then that is lost? I've also tried
window.addEventListener('xx')
Thank you
I am relatively new to JS so apologies for any basic errors I have made here.
I am attempting to insert some JS on our site that will detect if the user has Flash enabled & the site is able to launch a popup, if these fail the user will be directed to a support page to resolve these.
The code works without issue on Chrome and Firefox, the issue I am having is on IE the popup which launches as a test is not being closed by the script.
Am I missing something glaringly obvious?
function loadpopunder(){
var popupBlockerChecker = {
check: function(popup_window){
var _scope = this;
if (popup_window) {
if(/chrome/.test(navigator.userAgent.toLowerCase())){
setTimeout(function () {
_scope._is_popup_blocked(_scope, popup_window);
},250);
}else{
popup_window.onload = function () {
_scope._is_popup_blocked(_scope, popup_window);
};
}
}else{
_scope._displayError();
}
},
_is_popup_blocked: function(scope, popup_window){
if ((popup_window.outerHeight > 0)===true)
popup.close();
},
_displayError: function(){
popupFail=true;
}
};
var popup = window.open("http://www.google.com", '_blank', "width=10, height=10, left=1, top=1, scrollbars=no, resizable=no");
popupBlockerChecker.check(popup);
}
loadpopunder()
Before I get into the long-winded explanation and the code, let me just say that I understand that my implementation of this system is a bit of a hack-job. The goal was to implement a linking feature on a SPA application without completely overhauling what was already done with Angular and the Bootstrap modals. I'll wager that I probably could have accomplished something better with directives, but my understanding of directives is lacking.
The following is a function that is launched when the system detects a change in the URL. The new URL parameters are passed and are used to query the back-end for content.
function handleUrlParamsModalLaunch(data) {
/*Ensure modal is not displaying any data*/
vm.modalData = {};
vm.selectedTab = null;
/*Show modal loading gif*/
vm.isModalLoading = true;
$("#contentPartModal").modal();
/*Call the content service to return the clicked content article*/
contentpartservice.getContentItem(data.id, data.type).then(function (contentItem) {
if (contentItem) {
vm.isModalLoading = false;
vm.modalData = contentItem;
return;
} else {
closeModal("#contentPartModal").then(function () {
vm.isModalLoading = false;
logger.error('An error occurred while fetching content');
});
return;
}
}, function (error) {
closeModal("#contentPartModal").then(function () {
vm.isModalLoading = false;
logger.error('An error occurred while fetching content');
});
return;
});
}
The following function is run when a link is clicked. It adds the parameters needed to retrieve content from the back-end to the URL.
function setUrl(contentId, contentType) {
var urlParams = $location.search();
if (urlParams.q) {
$location.search({ q: urlParams.q, type: contentType, id: contentId });
} else {
$location.search({ type: contentType, id: contentId });
}
return;
}
The following is where the solution starts to look like a hack job. I need to remove the parameters from the URL when the modal closes, but I couldn't find a way to catch the Bootstrap modal close event from the scope of my Angular controller (where the above functions are being called). Instead, I wrote the following JavaScript code in script tags that does it without Angular's $location dependency.
<script>
/*
* Detect the closing of a modal window and modify the URL to no longer display linking information.
* Not handled in Angular because Angular lacks a suitable way to detect a bootstrap modal close.
*/
$('#contentPartModal').on('hidden.bs.modal', function () {
var pageUrl = $.url();
var pageParams = pageUrl.param();
if (pageParams.q) {
if (history.pushState) {
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?q=' + pageParams.q;
window.history.pushState({ path: newurl }, '', newurl);
}
} else {
if (history.pushState) {
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname;
window.history.pushState({ path: newurl }, '', newurl);
}
}
});
</script>
Here is the resulting bug. The first time you click on a link, all of these functions run fine. The modal is opened with the correct data being displayed. When you close the modal, the URL parameters are removed from view. When you go to click on another link, the setUrl function is called, but the URL doesn't actually change. This results in the modal pop-up not opening. A second click on any link, and everything works as expected. The resulting bug is that each link needs to be clicked twice after the first time the modal has been opened.
Any hints to the cause of this bug would be much appreciated. I'd also accept an idea for a better implementation that would help me circumvent the issue altogether.
Thanks,
Matt
Below is the piece of code I am using to open a link in a new window say "abc".
If the user again clicks on the same link, it should close and reopen the link in the same window "abc".
window.openOrFocus = function(url, "abc") {
if (!window.popups) {
window.popups = {};}
if (window.popups["abc"]){
var v=window.open("", "abc");
v.close();}
window.popups["abc"] = window.open(url, "abc");
}
But Now, say I click on the link, it opens the URL in a new window named "abc".
Now I go and close the window "abc". and go back and again click on the link.
That time it shows up the pop up blocker.
I am confused as to why this pop up blocker is coming when the I go and manually close the window and try to reopen by clicking on the link.
Happens both in IE as well as Chrome
Probably because you're calling window.open with a blank URL or repeatedly in that case.
You don't need your window.open("", "abc") call; instead, just use the window reference you already have:
window.openOrFocus = function(url, windowName) {
if (!window.popups) {
window.popups = {};
}
if (window.popups[windowName]){
window.popups[windowName].close();
}
window.popups[windowName] = window.open(url, windowName);
};
I would also listen for the unload event so you can remove your reference:
window.openOrFocus = function(url, windowName) {
if (!window.popups) {
window.popups = {};
}
if (window.popups[windowName]){
window.popups[windowName].close();
}
window.popups[windowName] = window.open(url, windowName);
window.popups[windowName].onunload = function() {
delete window.popups[windowName];
};
};
Side note: This is a syntax error:
window.openOrFocus = function(url, "abc") {
// --------------------------------^
I've replaced it with windowName in the code above.
I am new to pdf.js and google chrome extensions. I am using pdf.js to view PDF files in Chrome (https://github.com/mozilla/pdf.js/tree/master/extensions/chromium).
WHAT I WANT TO IMPLEMENT: Once my PDF is loaded and processed by PDF viewer (pdf.js), I want to check if a user is logged into my website via XmlHttpRequest. Then I want to create a popup window showing the user's name or ask him/her to login.
I've added checkLogin(); function to the following script (https://github.com/Rob--W/chrome-api/tree/master/chrome.tabs.executeScriptInFrame).
checkLogin(); opens a new popup window (dialog.html)
chrome.tabs.executeScriptInFrame.js :
function checkLogin() {
chrome.tabs.create({
url: chrome.extension.getURL('dialog.html'),
active: false
}, function(tab) {
// After the tab has been created, open a window to inject the tab
chrome.windows.create({
tabId: tab.id,
type: 'popup',
focused: true,
height: 200, width:500
});
});
}
dialog.html displays the message returned from dialog.js (containing username or asking user to login)
dialog.html :
<html>
<head><title>Dialog test</title></head>
<body>
<div id="output"></div>
<script src="dialog.js"></script>
</body>
</html>
dialog.js :
connect();
function connect() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "sendingcookies.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status ==200 ) {
var response = xhr.responseText;
document.getElementById('output').innerHTML = response;
}
}
xhr.send(null);
}
THE PROBLEM: If I insert checkLogin(); function in background.js, the script runs when the extension is loaded. However, I want to run this function each time a PDF is loaded and processed by pdf.js. I am not sure how to proceed as I'm still familiarizing with pdf.js code.
Any tips on how to implement this correctly will be awesome. Thanks in advance for your help!
So I figured out how to implement this. I'm posting this answer for those that may be interested.
As suggested by user #Luc on the thread How to know if PDF.JS has finished rendering? , I added my checkLogin(); function to this existing function in viewer.js.
document.addEventListener('textlayerrendered', function (e) {
var pageIndex = e.detail.pageNumber - 1;
var pageView = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
//Added this code - creates popup window once PDF has finished rendering
if (event.detail.pageNumber === PDFViewerApplication.page) {
checkLogin();
function checkLogin() {
chrome.tabs.create({
url: chrome.extension.getURL('dialog.html'),
active: false
}, function(tab) {
// After the tab has been created, open a window to inject the tab
chrome.windows.create({
tabId: tab.id,
type: 'popup',
focused: true,
// incognito, top, left, ...
height: 300, width:500
});
});
}
}
}, true);
As a result, my popup window loads while/once the PDF has finished rendering. It's pretty neat!