Clone a page in a popup with dom included - javascript

is it possible to clone an page, javascript and elements in a new popup?
I want to create a popup of a div used like a box of content, all is loaded in javascript
something like
var popup=window.open('', '_blank');
popup.document = this.document;
popup.document.close();
Thanks for your help

I have no idea why you would want to open a copy of the current window and then close it... But here you go:
if(window.name != 'mypopup') {
window.open(document.location.href,'mypopup');
} else {
window.onload = self.close();
}
** Note the window name check.. without it you would just get endless progressoin of windows opening...
<script type="text/javascript">
function popdiv(thediv) {
popwidth = thediv.width;
popheight = thediv.height;
popargs = 'width=' + popwidth + ', height=' + popheight;
popcontents = thediv.innerHTML;
thewindow = window.open('#', 'mypopup', popargs);
thedocument = thewindow.document.open();
thedocument.write = popcontents;
thedocument.close();
}
</script>
<div onclick="popdiv(this);">
Hello,<br />is it possible to clone an page, javascript and elements in a new popup?<br />
<br />I want to create a popup of a div used like a box of content, all is loaded in javascript <br />
Thanks for your help</div>

Related

Close existing window and open new window and pass the ID on anchor tag click

I have an anchor tag which opens a window onclick then in the window opened I have a table which has a column with an anchor tag as well.
Here's what I've been trying do
Code for anchor tag
function handleClickregion() {
var dropDown = document.getElementById('datestart');
var branding = document.getElementById('txtbxbrandid').value;
var dropValue = dropDown.options[dropDown.selectedIndex].value;
event.preventDefault();
window.open('pages/modals.php?param=' + dropValue + '&param2=' + branding + '&action=' + 2,'mywindow','directories=no,width=1100,height=500,resizable=yes')
}
<a href="#" id="detailswindow" onclick="handleClickregion()">
<span class="glyphicon glyphicon-th-list"></span> Details
</a>
Then in the modals.php I have a table which is show below (this is opened in a separate window, just a note)
Then when I click the Details I need to close the modals.php window and then open another window which passes the member_id to the new window.
How will I do that?
I managed to write a little code but it doesn't open a new modal but closese the previous.
If I do this, it closes the window but does not open a new one (modals2.php)
function closeandopennext() {
window.close('pages/modals.php');
window.open('pages/modals2.php?param=' + dropValue + '&param2=' + branding + '&action=' + 4,'mywindow','directories=no,width=1100,height=500,resizable=yes');
}
And I interchange the position it does not close the window at all and neither opens a new one
function closeandopennext() {
window.open('pages/modals2.php?param=' + dropValue + '&param2=' + branding + '&action=' + 4,'mywindow','directories=no,width=1100,height=500,resizable=yes');
window.close('pages/modals.php');
}
This works so far so good. Hope you this help you!
var app = app || {};
app.open = function(){
app.current = window.open("", "MsgWindow", "width=200,height=100");
app.current.document.write("<input type='button' onClick='javascript:opener.call(100)' value='close' />" );
}
window.call = function(params){
app.current.close();
app.current = window.open("", "MsgWindow", "width=200,height=100");
app.current.document.write("<p> I receive param " + params);
}
<button onclick="open()">Open</button>

Print a document with JavaScript

I want to open a print dialog for a file(docx,pdf,...) via a SharePoint Workflow. There I call a URL with GET and pass the URL of the file after the ? like this:
http://www.sharepoint_intranet.com/print.html?link-to-file.pdf
EDIT: I also tried:
<script type="text/javascript">
//Get the URL of the file
var urlOfFile = window.location.search.replace("?", "");
document.write("<iframe id=" + "printDocument" + " src=" + "'" + urlOfFile + "'" + " width=" + "600" + " height=" + "400" + "></iframe>");
window.frames['printDocument'].focus();
window.frames['printDocument'].print();
</script>
The Print Dialog is opening and in the print options there is the Point "Only selected Frame" selected but when I press the print button nothing will happen.
Thanks for any help!
you can put in the body of the html
<body onLoad="window.print();">
so the page is opened already prints the document.
The issue is that the new url doesn't start loading until the current script block has finished executing. Therefore when you call w.print(), the new window is currently blank.
Try:
<script type="text/javascript">
//Get the URL of the file
var urlOfFile = window.location.search.replace("?", "");
//print
var w = window.open(urlOfFile);
w.onload = function() {
w.print();
}
</script>
EDIT: I didn't read the question properly! The above technique only works for html. The way to solve this is to use an iframe and if we are using an iframe we might as well dispense with the popups entirely. The following code creates an iframe with a source set to the desired document, attaches the iframe to the page (but keeps it invisible), prints the contents of the iframe and finally removes the iframe once we've finished with it. Only tested in Chrome but I'm fairly confident that it'll work in other browsers.
<script type="text/javascript">
//Get the URL of the file
var urlOfFile = window.location.search.replace("?", "");
//print
var iframe = document.createElement('iframe');
iframe.src = urlOfFile;
iframe.style.display = "none";
var iFrameLoaded = function() {
iframe.contentWindow.print();
iframe.parentNode.removeChild(iframe);
};
if (iframe.attachEvent) iframe.attachEvent('onload', iFrameLoaded); // for IE
else if(iframe.addEventListener) iframe.addEventListener('load', iFrameLoaded, false); // for most other browsers
else iframe.onload = iFrameLoaded; // just in case there's a browser not covered by the first two
window.onload = function() {
document.body.appendChild(iframe);
};
</script>
where we can give the path of the file like("abc.doc"/"abc.xls")
var urlOfFile = window.location.search.replace("?", "");

popup in a popup, second popup has no focus?

Ok I know this is going to sound weird but it is what the client wants. I am working within a popup and when a user clicks on a datagrid cell within a certain column it will popup a html table with data. I have the second popup to display but it does not get focus. This is currently the code I am using to create the second popup. Any help to get the focus on this second popup would be great.
function onCellClick() {
var cmGrid = igtbl_getGridById("countermeasureDetailsGrid");
var cmCellID = cmGrid.ActiveCell.split("_");
if (cmCellID[3] === "3") {
var countermeasureID = igtbl_getCellById("countermeasureDetailsGrid_rc_" + cmCellID[2] + "_0").getValue();
var recordType = igtbl_getCellById("countermeasureDetailsGrid_rc_" + cmCellID[2] + "_4").getValue();
_crfPopupWindow = new crfPopupWindow(countermeasureID, recordType);
_crfPopupWindow.open();
_crfPopupWindow.focus();
}
}
function crfPopupWindow(countermeasureID, recordType) {
var crfPopup = new WindowDef();
crfPopup.target = "CRF_Popup.aspx?countermeasureID=" + countermeasureID + "&" + "recordType=" + recordType;
crfPopup.windowName = "CRFPopup";
crfPopup.toolBar = "no";
crfPopup.resizable = "yes";
crfPopup.scrollbars = "yes";
crfPopup.location = "yes";
crfPopup.width = 350;
crfPopup.height = 400;
return crfPopup;
}
EDIT: Solution
<script type="text/javascript" language="javascript">
function init() {
window.focus();
}
</script>
Have you checked that the 2nd popup has higher z-index CSS property?
First popup can have z-index of, say, 1000, but the second should have then 1001.
window.focus on page load This works

How to open a new window and insert html into it using jQuery?

I am trying to open a new window from javascript but nothing is being inserted into the html:
var callScriptText = $('#callScriptText').html();
var url = '/Action/CallScript/?callScript=';
// Open the current call script in a new window
var openWindow = window.open(url, 'callScriptPopup', 'width = 500, height = 500');
$(openWindow).html(callScriptText);
Does anyone know why?
Here's an example to open a new window with content using jQuery
<script>
function nWin() {
var w = window.open();
var html = $("#toNewWindow").html();
$(w.document.body).html(html);
}
$(function() {
$("a#print").click(nWin);
});​
</script>
<div id="toNewWindow">
<p>Your content here</p>
</div>
Open​
EDIT:
For those who say that this code doesn't work, here's a jsfiddle to try it http://jsfiddle.net/8dXvt/
Try this:
var x=window.open();
x.document.open();
x.document.write('content');
x.document.close();
I find it works in Chrome and IE.
Building upon #Emre's answer.
With javascript, you can chain, so I just modified the code to:
var x=window.open();
x.document.open().write('content');
x.close();
Also, to force it to a new window (not a new tab), give the first line dimensions. But it has to be the third argument. So change the first line to:
var x=window.open('','','width=600, height=600');
try:
var x = window.open('', '', 'location=no,toolbar=0');
x.document.body.innerHTML = 'content';
var codeContents = $("#contentsfornewWindow").html()
var win = window.open('', 'title', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=1000,height=1000,left=200,top=70');
win.document.body.innerHTML = codeContents;
VS:
win.document.write(codeContents);
I have notice if there are iframes like youtubes videos , win.document.write loads the iframes where as document.body.innerHTML does not!

Better way to write this popup function?

function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "',
'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=400,height=600,left=600,top=300');");
}
Open the Popup Window
That is the code I have now. I want to change it so that it targets a specific class like "popup" and all links with that class generates a popup window with the link in the href.
Kind of like this:
<a class="popup" href="http://google.com">Open the Popup Window</a>
How would I achieve this?
The best optimisation is to remove it, let visitors decide if they want to open the link in a new window or not. At the very least, move the code to a listener:
Open the Popup Window
Then in the popup function, return false if the function executes correctly.
function popUp(URL){
day = new Date();
id = day.getTime();
window.open(URL,'"+id+"','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=400,height=600,left=600,top=300');
}
Sorry to be tardy to the party, but here's my 2 cents:
With jquery to do your example
<a class="popup" href="http://google.com">Open the Popup Window</a>
you could use:
var page = [], id=0;
$('.popup').click(function(e){
e.preventDefault();
// add to array of open popups
page.push(window.open(this.href,"page"+id,'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=400,height=600,left=600,top=300'));
id++;
return false;
});
Then you'd use something like this to close popups in order they were opened.
$('button').click(function(e){
page.reverse();
page.pop().close();
page.reverse();
});

Categories