My web page opens app.html first.After clicking to login i need to open index.html which i open in iframe and i dynamically create iframe in javascript.so to open that i frame im appending to document.body.But it appends to the body of the app.html.But I need to open in new page
var el = document.createElement("iframe");
el.setAttribute('id', 'ifrm');
el.setAttribute('name', 'ifrm');
el.setAttribute('src', '/index/index.html');
el.setAttribute('width', '100%');
el.setAttribute('height', '100%');
el.setAttribute('scrolling', 'no');
document.body.appendChild(el);
You could use this to open in a new window:
var myWindow = window.open("/index/index.html");
You would have to layer the iframe over the current page
el.style.position = 'absolute';
el.style.top = 0;
el.style.left = 0;
You question is a bit unclear as to what you are trying to do. The answer all depends on things like:
Are you trying to open index.html in addition to app.html or instead of it?
If you want both open, then do you want to open in a new window?
If so, do you want a regular window (i.e. same size as the original, without modification). Yes, then use JavaScript:
newWin = window.open("index.html", "My App's Main Window", winOptions);
or a specific size window, with other modifications (no Navigation bar, No address bar, etc) - in other words do you want a Popup Window
<html>
<head>
<title>JavaScript Popup Example</title>
<script type="text/javascript">
function loginCheck(){
//isLoggedIn is a boolean variable you've set to check login
if (isLoggedIn) {
popup();
}
}
function popon(){
var winOptions = "";
winOptions += "location=1, ";
winOptions += "status=0, ";
winOptions += "scrollbars=0, ";
winOptions += "width=100, ";
winOptions += "height=100";
newWin = window.open(
"index.html",
"My App's Main Window",
winOptions
);
newWin.moveTo(400, 300); //300 pixels down,
//400 pixels to the right
}
</script>
</head>
<body onload="javascript: loginCheck()">
<h1>JavaScript Popup Example</h1>
</body>
</html>
Or do you want to open index.html in a new tab?
simply use the target attribute in your anchor tag with the value set to new, e.g. <a target="new"...
If you are trying to replace index.html/open in the same tab... you don't need to do anything with your href
If you want to open the content of app.html WITHIN the app.html page somehow... then you either:
Need to use an iframe (that can already be tagged in the app.html (you don't need to create it dynamically with JavaScript) and load index.html into it OR...
Use AJAX to load the page behind the scenes while app.html is STILL loaded, in the window/tab... without reloading or replacing it. Once the AJAX request completes, youi would then do something with the HTML from index.html... like:
use plain vanilla JavaScript to dynamically create a div (or show a hidden div) and fill it once index.html is loaded.
use a (jQuery) widget such as a tab/tab set or accordion and fill it when app.html is loaded
Related
I have been working on a project that I just need to print the contents of a hidden div. The below solution works fine, but replaces the page contents with the div then calls the print of the window and then replaces the page with the original contents. This is fine, but when I click on the page after this or try to print again, the page refreshes.
Is there a way, without opening a new window to print the contents of a div and the page still be functional?
$scope.printDiv = function(printable) {
var restorePage = document.body.innerHTML;
var printContent = document.getElementById(printable).innerHTML;
document.body.innerHTML = "<html><head><title></title></head><body>" + printContent + "</body>";
window.print();
document.body.innerHTML = restorePage;
};
I had created a directive that did something much like this. It involves creating a new window, populating it with the HTML you want printed, printing that window, and then finally closing.
The code looks like the following:
$scope.printPage = function() {
var pageToPrint = $window.open('', 'Print Page', 'width=800, height=600');
pageToPrint.document.write(angular.element(pageHtml).html());
pageToPrint.document.close();
pageToPrint.focus();
pageToPrint.print();
pageToPrint.close();
}
This works in all of the browsers and cleanly closes everything out once the user finishes with the print dialog window.
You can do it with CSS: https://stackoverflow.com/a/356123/1516112
When the user click on your button, wrap your entire page inside a div using the .no-print class. Next add your content in another div next to the previous div. Call print() and restore your page. It should works.
See a similar question that I found: AJAX - Print Page Content
It seems the answer of Matt Razza is what You are looking for.
If you're trying to print invisible content you could use two
different css files for the different media (screen vs print) where
you hide/unhide the required content via display: none; and then
spawn the print dialog via window.print().
<link rel="stylesheet" type="text/css" href="theme1.css" media="screen" />
<link rel="stylesheet" type="text/css" href="theme2.css" media="print" />
<div class="hidden_on_page">YOU CAN'T SEE ME BUT YOU CAN PRINT ME!</div>
<div class="on_page">YOU CAN SEE ME BUT YOU CAN'T PRINT ME</div>
Then in theme1.css:
.hidden_on_page { display: none; }
theme 2.css:
.on_page { display: none; }
And you would trigger the print dialog to spawn when required via:
window.print();
I am trying to open a new window using window.open with dynamic content (for print functionality I am using this dynamic content).
Below dynamic HTML is not visible on window.open page where as in view source it is available. Please help me out why it is not getting displayed there.
Below is the code.
var win = window.open('', 'title', 'toolbar=0,location=0,menubar=0,resizable=yes,width=' + (screen.width - 100) + ', height=' + (screen.height - 150));
win.document.write("<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>");
win.document.write("<html>");
win.document.write("<head><title>title</title>");
win.document.write('<script language="javascript" type="text/javascript">function printPage() { PrintDiv("defaultPrintBuffer"); }<\/script>');
win.document.write('</head>');
win.document.write('<body>');
win.document.write("<iframe width='560' height='315' id='defaultPrintBuffer2' name='defaultPrintBuffer2'>");
win.document.write(iframeContent);
win.document.write("</iframe>");
win.document.write('</body>');
win.document.write("</html>");
win.document.close();
win.focus();
win.printPage();
Since you mention that you're trying to implement printing, I'll add how I solved this problem in an answer instead of a comment, so the code is more readable.
Basically I made an empty (but valid) html page and just insert nodes into that page before printing it. This avoids the use of document.write and iframes, which are considered bad practice in alot of cases. If you really want to use an iframe, just add the iframe to the print page html and append your content to that node instead of to the body.
var data = $('myPartOfPageSelector'),
printPage;
if (!data || !data.length) alert('Nothing to print.');
else {
printPage = window.open('resources/print.html');
setTimeout(function() {
printPage.document.body.innerHTML = data.innerHTML;
printPage.print();
printPage.close();
}, 100);
}
The iframe tag doesn't show the content that you put in it, you have to load a page in the iframe.
You could use a script to put content in the iframe:
win.document.write("<iframe width='560' height='315' id='defaultPrintBuffer2' name='defaultPrintBuffer2'>");
win.document.write("</iframe>");
win.document.write("<script type='text/javascript'>var doc = document.getElementById('defaultPrintBuffer2').contentWindow.document;doc.open();doc.write('" + iframeContent.replace("'","\\'").replace("\\","\\\\") + "');doc.close();</script>");
Note that the content should be a complete HTML document in itself.
<script>
var win = window.open();
win.document.body.innerHTML = "this is html that I want to print";
win.onload = function () { win.print(); }
</script>
everything works but print, how do I wait until the page loads the dynamic html with blank URL, then print?
I don't think there is a way to do it, like the user below me the onload wont fire probably because as soon as the window opened the page was already loaded. What I'm trying to do is load the entire page FIRST then print. The script I posted doesn't do this.
Martin, using your code:
<script>
var win = window.open();
win.document.body.innerHTML = "<img src='https://upload.wikimedia.org/wikipedia/commons/2/24/Willaerts_Adam_The_Embarkation_of_the_Elector_Palantine_Oil_Canvas-huge.jpg'/>";
win.print();
</script>
In chrome it prints a blank page.
EDIT:
Martin, the onload img attribute did the trick. Heres what I did to modify the script:
<script>
var win = window.open();
var html = "this is some test html <br><img src='https://upload.wikimedia.org/wikipedia/commons/2/24/Willaerts_Adam_The_Embarkation_of_the_Elector_Palantine_Oil_Canvas-huge.jpg'/>";
html = html.replace("<img ","<img onload='window.print();' ");
win.document.body.innerHTML = html;
</script>
So all img tags will add a onload=window.print. But really only one of them needs a onload (I'm pretty sure....). But to give you more information, in my scenario the variable html could be an infinite number of images, random text,tables, etc. It could be anything. Thank you Martin for having the patience to re-read this thread and reply.
Jeff, to make it work with an image, I'm pasting an example below. However, depending on exactly how your final page will look like perhaps a more generic solution is needed. Will your page be more complex?
<script>
var win = window.open();
win.document.body.innerHTML = "<img src='https://upload.wikimedia.org/wikipedia/commons/2/24/Willaerts_Adam_The_Embarkation_of_the_Elector_Palantine_Oil_Canvas-huge.jpg' onload='window.print();'/>";
</script>
This works (without images):
<script>
var win = window.open();
win.document.body.innerHTML = "this is html that I want to print";
win.print();
</script>
I don't think you need onload as you're not loading a page, so probably it won't fire.
I load a pdf that the user clicks on via a URL call. See the following javascript:
$("ul.card[data-entry-id]").css("cursor","pointer").on("click",
function(event)
{
document.location = "/archives/entry/" + $(this).attr("data-entry-id");
}
);
I want to change the browser title of the pdf that comes up, so that it is not just the url. Adding document.title("New Title") to the function block does not work because it is not synchronized with the server returning the file that's being displayed in the browser. How can I overcome this?
Perhaps I could open a new page (rather than changing the document location) that wraps the URL call in html so that I can set the title - something like this:
<html>
<head>
<title>New Title</title>
</head>
<body>
<iframe src="/archives/entry/98"></iframe>
</body>
</html>
And that way, I could set the title. How can I write this html to a new page from within the javascript function block I have that responds to a click? Thanks in advance.
Instead of changing location you can load data by ajax.
$("ul.card[data-entry-id]").css("cursor","pointer").on("click",
function(event)
{
var title = $(this).text();
var url = "/archives/entry/" + $(this).attr("data-entry-id");
document.body.innerHTML = "<p>Loading...</p>"; // Or a loading image
$.ajax(url).done(function(data){
$(document.body).html(data);
document.title = title;
})
}
);
If you set a title in the PDF document you can make it display as your browser title.
Follow these instructions:
http://www.w3.org/TR/WCAG20-TECHS/PDF18.html
A jQuery approach, relatively easy to modify for plain JavaScript:
$('body').html('<iframe src="/archives/entry/98">');
document.title = "New Title";
I'm trying to generate a pop-up window with a printable version of a small portion of the main window. I'm using Meteor, so the HTML and CSS files are all programmatically generated.
What I'd like to do is use Javascript to read all the linked CSS files in the parent window and append them to the child window.
var childWindow = window.open("", "_blank", "width=350,height=150");
var childDoc = childWindow.document;
var childHead = childDoc.getElementsByTagName("head")[0];
$('link').each(function(index,element){
childLink = childDoc.createElement("link");
childLink.rel = "stylesheet";
childLink.href = element.href;
childHead.appendChild(childLink);
});
childDoc.write(myHtml);
But its not working. It appears that childHead is referring to the head of the parent document, not the child. I'm not sure if this is a security thing I'm running afoul of or just have a mistake in the code.
Any ideas what I'm doing wrong?
I'm doing a very similar thing on one of my pages. I just use the 'parent' page to write everything and it works fine. Here is how it works for me. See this fiddle in action.
You'll notice that it only prints the stuff from the printMe div. Also, the printed page has all the same exact scripts and styles that the parent page does.
some stuff NOT to print
<div id="printMe" class="ui-selectable-helper">
I should be printed, but not the other stuff.
</div>
more stuff NOT to print
$(function(){
var printWindow = window.open('', 'printWin', 'height=600, width=900, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');
//create a new HEAD with the exact same content as the main page
var writeMe = ('<body><head>' + $('head').html() + '</head><html>');
//grab the content of the printMe div and use it on the print page
writeMe += ("<div>" + $('#printMe')[0].outerHTML + "</div>");
writeMe += ('</html></body>');
printWindow.document.write(writeMe);
printWindow.document.close();
printWindow.focus();
printWindow.print();
//you might even use this next line if you want the 'popup' window to go away as soon as they have finished printing.
//printWindow.close();
});
Note: I am just using the class="ui-selectable-helper" to show you that indeed the CSS pages are transferring properly to the new popup window.
What ended up working for me was appending something to the body with childDoc.write(myHtml);
Previous to this, the CSS would not load, but once I actually passed in a few divs, the CSS showed up without any other modifications.