How to show a modal pop-up using `window.open`? - javascript

I am currently using window.showModalDilog to open a modal pop up window which is not allowing the parent window to do any action.
But through Google search, I found that it is not the standard method and various browsers has stopped supporting this function.
In fact I am facing this problem in Opera. Opera gives me a Javascript error and stops execution at that point. Nothing can happen after that error.
So, I have only one option left and that is window.open.
But I want to disable parent window (likewise in showModalDilog).
I tried below code to do so:
$(window).load(function() {
window.opener.document.body.disabled=true;
});
$(window).unload(function() {
window.opener.document.body.disabled=false;
});
But that did not work.
I want to open an URL in the pop-up window and then do certain actions after the URL is opened, including submitting a form.
My code to open a pop up:
window.open("https://www.picpixa.com/wp-content/plugins/create-own-object/plugin-google-drive/index.php", "socialPopupWindow", "location=no,width=600,height=600,scrollbars=yes,top=100,left=700,resizable = no");
It would also help if I could open only one pop-up window on the clicking of multiple buttons. I mean if I click on "btn1" a pop-up named "temp" shall open. But if I click on "btn2" then instead of opening a new pop up "temp" shall reload.

I was able to make parent window disable. However making the pop-up always keep raised didn't work. Below code works even for frame tags. Just add id and class property to frame tag and it works well there too.
In parent window use:
<head>
<style>
.disableWin{
pointer-events: none;
}
</style>
<script type="text/javascript">
function openPopUp(url) {
disableParentWin();
var win = window.open(url);
win.focus();
checkPopUpClosed(win);
}
/*Function to detect pop up is closed and take action to enable parent window*/
function checkPopUpClosed(win) {
var timer = setInterval(function() {
if(win.closed) {
clearInterval(timer);
enableParentWin();
}
}, 1000);
}
/*Function to enable parent window*/
function enableParentWin() {
window.document.getElementById('mainDiv').class="";
}
/*Function to enable parent window*/
function disableParentWin() {
window.document.getElementById('mainDiv').class="disableWin";
}
</script>
</head>
<body>
<div id="mainDiv class="">
</div>
</body>

You can't make window.open modal and I strongly recommend you not to go that way.
Instead you can use something like jQuery UI's dialog widget.
UPDATE:
You can use load() method:
$("#dialog").load("resource.php").dialog({options});
This way it would be faster but the markup will merge into your main document so any submit will be applied on the main window.
And you can use an IFRAME:
$("#dialog").append($("<iframe></iframe>").attr("src", "resource.php")).dialog({options});
This is slower, but will submit independently.

Modal Window using ExtJS approach.
In Main Window
<html>
<link rel="stylesheet" href="ext.css" type="text/css">
<head>
<script type="text/javascript" src="ext-all.js"></script>
function openModalDialog() {
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'Hello',
height: Ext.getBody().getViewSize().height*0.8,
width: Ext.getBody().getViewSize().width*0.8,
minWidth:'730',
minHeight:'450',
layout: 'fit',
itemId : 'popUpWin',
modal:true,
shadow:false,
resizable:true,
constrainHeader:true,
items: [{
xtype: 'box',
autoEl: {
tag: 'iframe',
src: '2.html',
frameBorder:'0'
}
}]
}).show();
});
}
function closeExtWin(isSubmit) {
Ext.ComponentQuery.query('#popUpWin')[0].close();
if (isSubmit) {
document.forms[0].userAction.value = "refresh";
document.forms[0].submit();
}
}
</head>
<body>
<form action="abc.jsp">
Click to open dialog
</form>
</body>
</html>
In popupWindow 2.html
<html>
<head>
<script type="text\javascript">
function doSubmit(action) {
if (action == 'save') {
window.parent.closeExtWin(true);
} else {
window.parent.closeExtWin(false);
}
}
</script>
</head>
<body>
Save
Cancel
</body>
</html>

Related

Refresh Parent Page after window.open javascript while child window contains window.print onload of it

I want to open a link in new tab and immediately refresh my page in JavaScript. But when I open a new tab using window.open(), it does't reload my page. it waits for new tab to be closed then refresh my page.
Although it works in IE. But Chrome is waiting to child window to be closed.
$.ajax({
url: '/MailMan/Print'
, dataType: "json"
, type: "POST"
, success: function (result) {
if (result.success == true) {
window.open(
'/MailMan/Index/Building/1/Shift/1'
, '_blank'
);
window.location.reload();
}
}
});
The child page contains window.print() command in onload()of it. and when I close print dialog , main page refreshes successfully. This is my child page :
<head>
<meta name="viewport" content="width=device-width" />
<script>
window.onload = function () {
window.print();
}
</script>
</head>
<body>
</body>
I change my child window as below and it works for me. although it bring print dialog 1 sec later but it's not a big deal for me.
<head>
<meta name="viewport" content="width=device-width" />
<script>
window.onload = function () {
window.setTimeout(window.print(),1000
);
}
</script>
</head>
<body>
</body>

Correctly using port.emit & port.on between main.js and a script attached to a tab

I'm trying to make a function in this extension that will open a tab with a given url and run a script on that tab with a given filename. The function mostly works except that I am unable to communicate between the main script and the script I ran on the new tab (I used .attach for this). I know the communication isn't working because it hasn't been printing "Contact successful, over" in the console which should be triggered via one of the .port functions which is currently commented out.
I have been going over the Mozilla tutorials for hours now. I'm pretty sure I screwed up something simple, but I can't find a good example in the tutorial that uses tabs, .port functions, and external scripts.
Addon works by:
(starting with Main)
Adding a button to the toolbar that opens a panel (DeltaLogPanel)
This panel has a button that triggers some user input processing (get-text.js) and our function of interest (Main.js>TryFA)
This function should open a new tab with the given url
Upon the loading of this tab, the function should also have a stored script (FAmeddle) run on this tab
The function needs to facilitate (or at least trigger) communication between the tab's script and the main script. This includes passing variables
These scripts are a severely cut down version of my addon, however the addon works and retains the main problem of doing the fifth step.
Main.js
var data = require("sdk/self").data;
var journal_entry = require("sdk/panel").Panel({
contentURL: data.url("DeltaLogPanel.html"),
contentScriptFile: data.url("get-text.js")
});
require("sdk/ui/button/action").ActionButton({
id: "show-panel",
label: "Show Panel",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onClick: handleClick
});
function handleClick(state) {
journal_entry.show();
}
journal_entry.on("show", function() {
journal_entry.port.emit("show");
});
function ShoutOut(x) {
console.log(x);
}
//this should open up a new tab and run a script on it
function TryFA(URL, SCRIPT) {
var tabs = require("sdk/tabs");
tabs.open({
url: URL,
onReady: function onReady(tab) {
console.log("the open triggered");
tab.attach({
contentScriptFile: data.url(SCRIPT)
});
/* tab.port.on("WeReadYouLoudAndClear",ShoutOut(signal)); */
//self.port tabs.port and tab.port don't work here
}
});
}
/* self.port.on("WeReadYouLoudAndClear",ShoutOut(signal)); */
//tabs.port tab.port and self.port really screw things up here
//This is what the panel button triggered
journal_entry.port.on("cargo-shipping", function (cargo) {
journal_entry.hide();
TryFA("http://www.reddit.com/","FAmeddle.js");
});
DeltaLogPanel.html
<!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">
<head>
<style>
#MainPanel
{
width: 180px;
height:180px;
background-color: #ACA1A1;
}
</style>
</head>
<body id="MainPanel">
<div id="simpleOptions">
<textarea id="titleBox" placeholder="Title" rows="1"></textarea>
<button type="button" id="publishButton">Publish</button>
</div>
</body>
</html>
get-text.js
//This script was user for processing and passing along user input. It worked perfectly,
//so there's not much I need to show you here
var titleArea = document.getElementById("titleBox");
var finalButton = document.getElementById("publishButton");
//this defines the cargo on the button press then ships it.
finalButton.addEventListener('click', function() {
// Remove the newline.
var cargo = {
//This is the user input passed from the panel going to main
title: ""
};
cargo.title = titleArea.value.replace(/[\n\r]/g, '');
self.port.emit("cargo-shipping", cargo);
//next we reset everything Note, this doesn't erase local cargo, just the text on the panel
}, false);
self.port.on("show", function onShow() {
titleArea.focus();
});
FAmeddle.js
function myFunction() {
var x = document.getElementById("sr-header-area");
x.style.backgroundColor = "red";
var signal = "Contact successful, over";
console.log("the function ran at least");
self.port.emit("WeReadYouLoudAndClear", signal);
}
console.log("Shout out from the extra script!");
myFunction();
These are my questions:
Is there a better way to run a script on a newly opened tab like this?
How can I make .port and .on work in this? (If there is a better way to communicate between main.js and the new page script, explain that instead)
[optional query] I'm going to be running this overall function several times. So at least six different scripts for new tabs will be loaded one by one. How do I prevent this from causing performance issues?
EDIT: Solution
In Main
Instead of this:
function TryFA(URL, SCRIPT) {
var tabs = require("sdk/tabs");
tabs.open({
url: URL,
onReady: function onReady(tab) {
console.log("the open triggered");
tab.attach({
contentScriptFile: data.url(SCRIPT)
});
tab.port.on("WeReadYouLoudAndClear",ShoutOut(signal));
//This ShoutOut function doesn't work for a completely separate reason
}
});
}
use this:
function TryFA(URL, SCRIPT) {
var tabs = require("sdk/tabs");
tabs.open({
url: URL,
onReady: function onReady(tab) {
console.log("the open triggered");
worker = tab.attach({
contentScriptFile: data.url(SCRIPT)
});
worker.port.on("WeReadYouLoudAndClear",function(signal) {
console.log(signal);
worker.port.emit("Connection stable", Backback);
});
}
});
}
Edit 2: Backback is a message variable sent from another addon code. It's not that important.
tab.attach({
contentScriptFile: data.url(SCRIPT)
});
/* tab.port.on("WeReadYouLoudAndClear",ShoutOut(signal)); */
//self.port tabs.port and tab.port don't work here
tab.attach() returns a worker, which in turn has a port. The tab itself does not have a port, as you noted in your comment.
Alternatively attach also accepts a callback as onMessage option.
MDN also has code examples for worker and addon-main port usage.

Call iframe function in parent window

How can i call iframe function in parent window, i did something like below but not seems working in firefox. Same code working perfectly in chrome.
window.frames["original_preview_iframe"].window.exportAndView(img_id);
i think you have to use
document.getElementById('target_Frame').contentWindow.callingtargetFunction();
otherwise use this url describes solution for your problem
Invoking JavaScript code in an iframe from the parent page
Try to not type window after you 'selected' the iframe:
window.frames["original_preview_iframe"].exportAndView(img_id);
Would suggest this https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Clear wiki example that worked for me:
var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello B', 'http://example.com/');
And then in the iframe:
function receiver(event) {
if (event.origin == 'http://example.net') {
if (event.data == 'Hello B') {
event.source.postMessage('Hello A, how are you?', event.origin);
}
else {
alert(event.data);
}
}
}
window.addEventListener('message', receiver, false);
(https://en.wikipedia.org/wiki/Web_Messaging.)
There are several ways to call the iframe function.
We assume you iframe id is original_preview_iframe
Way 1
You can use document.getElementById("original_preview_iframe").contentWindow.exportAndView() to trigger.
Way 2
Use window.frames.
window.frames is an array, you can set the iframe name with window.name="this is iframe test" in "test.html"
Then you can iterator the array, and compare the name, then trigger it.
for (let i = 0; i < window.frames.length; i++) {
if (window.frames[i].name === "this is iframe test") {
window.frames[i].exportAndView()
}
}
Way 3
Use postMessage.
In the way1 and way2, you need to assign function in the window object.
<body>
<script>
// this one
window.exportAndView = function(){}
// or this one
function exportAndView(){}
</script>
</body>
In the Way3, you can hide the exportAndView then you also can trigger it.
Here is an example.
// a.html
<html>
<body>
<iframe id="original_preview_iframe" src="/b.html">
</iframe>
<script>
// let postMessage trigger after b.html load
setTimeout(function(){
document.getElementById("original_preview_iframe").contentWindow.postMessage({data: "hi"});
}, 500)
</script>
</body>
</html>
// b.html (iframe html)
<html>
<body>
<script>
(function() {
function exportAndView() {
console.log("test");
}
window.addEventListener("message", (event) => {
exportAndView()
})
})()
</script>
</body>
</html>
Then in a.html, you can try use the way1 or way2, like document.getElementById("original_preview_iframe").contentWindow.exportAndView().
exportAndView will not be called becuase the scope problem.

win.onload not working

This is my code.My prblem is that when i click on button the window.open function work properly and it show a popup window but after this,page cannot redirect to define location:
<script type="text/javascript">
var win=null;
$(document).ready(function() {
$("#buttonid").live("click",function(){
var alt = "http://www.testhost.com/test.php";
var rel = "http://www.testhost.com/test2.php";
var width= (window.innerWidth)-450;
var win = window.open(alt,"mywin","width=450,height="+window.innerHeight+",left="+width+", location=no, menubar=no, status=no, titlebar=no, scrollbars=no");
win.onload=function(){
window.location=rel;
}
win.blur();
//setTimeout(win.focus(), 0);
return false;
});
});
</script>
</head>
<body>
<button id="buttonid">Click</button>
</body>
You need to specify it as below,
win.onload=function()
{
window.open.location=rel;
}
Take a look at this post: Detecting the onload event of a window opened with window.open
If you are opening a window to a different domain, you will not be able to tie into this event.
That post has several things you can try.
win.addEventListener('load', function () {
alert('popup loaded');
}, false);
This is a more ideal cross-browser solution (again, it's from that link):
win[win.addEventListener ? 'addEventListener' : 'attachEvent'](
(win.attachEvent ? 'on' : '') + 'load', function () {
alert('popup loaded');
}, false
);
EDIT: Just tried the second code snippet in IE10, FF18, and Chrome 25. The onload event worked great, as long as it was pointing to a URL that was on the same domain as the site calling it. Even I pointed the URL to www.google.com, my event never fired. This is a security feature of the browsers, and I don't think you'll be able to do much about it...

Open popup and refresh parent page on close popup

I opened a popup window by window.open in JavaScript, I want to refresh parent page when I close this popup window.(onclose event?) how can I do that?
window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
You can access parent window using 'window.opener', so, write something like the following in the child window:
<script>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
</script>
The pop-up window does not have any close event that you can listen to.
On the other hand, there is a closed property that is set to true when the window gets closed.
You can set a timer to check that closed property and do it like this:
var win = window.open('foo.html', 'windowName',"width=200,height=200,scrollbars=no");
var timer = setInterval(function() {
if(win.closed) {
clearInterval(timer);
alert('closed');
}
}, 1000);
See this working Fiddle example!
on your child page, put these:
<script type="text/javascript">
function refreshAndClose() {
window.opener.location.reload(true);
window.close();
}
</script>
and
<body onbeforeunload="refreshAndClose();">
but as a good UI design, you should use a Close button because it's more user friendly. see code below.
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
window.opener.location.reload(true);
window.close();
});
});
</script>
<input type='button' id='btn' value='Close' />
I use this:
<script language='javascript'>
var t;
function doLoad() {
t = setTimeout("window.close()",1000);
}
</script>
<script type="text/javascript">
function refreshAndClose() {
window.opener.location.reload(true);
window.close();
}
</script>
<body onbeforeunload="refreshAndClose();" onLoad='doLoad()''>
when the window closes it then refreshes the parent window.
window.open will return a reference to the newly created window, provided the URL opened complies with Same Origin Policy.
This should work:
function windowClose() {
window.location.reload();
}
var foo = window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
foo.onbeforeunload= windowClose;​
In my case I opened a pop up window on click on linkbutton in parent page.
To refresh parent on closing child using
window.opener.location.reload();
in child window caused re open the child window (Might be because of View State I guess. Correct me If I m wrong).
So I decided not to reload page in parent and load the the page again assigning same url to it.
To avoid popup opening again after closing pop up window this might help,
window.onunload = function(){
window.opener.location = window.opener.location;};
If your app runs on an HTML5 enabled browser. You can use postMessage. The example given there is quite similar to yours.
Try this
self.opener.location.reload();
Open the parent of a current window and reload the location.
You can reach main page with parent command (parent is the window) after the step you can make everything...
function funcx() {
var result = confirm('bla bla bla.!');
if(result)
//parent.location.assign("http://localhost:58250/Ekocc/" + document.getElementById('hdnLink').value + "");
parent.location.assign("http://blabla.com/" + document.getElementById('hdnLink').value + "");
}
You can use the below code in the parent page.
<script>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
</script>
Following code will manage to refresh parent window post close :
function ManageQB_PopUp() {
$(document).ready(function () {
window.close();
});
window.onunload = function () {
var win = window.opener;
if (!win.closed) {
window.opener.location.reload();
}
};
}

Categories

Resources