I'm trying to print iframe content.
contentWindow.focus();
contentWindow.print();
This code works in IE, Firefox and Safari. But don't work in Chrome and Opera. These browsers print entire page.
I tried to use this topic How do I print an IFrame from javascript in Safari/Chrome. But it didn't help me.
Could someone help me?
This is a known bug in Opera. In addition to the above ideas for workarounds, you may want to play with something like this:
var clone=document.documentElement.cloneNode(true)
var win=window.open('about:blank');
win.document.replaceChild(clone, win.document.documentElement);
win.print();
I have not tested this but it should create a copy of the page in a popup window and print it, without having to load the content a second time from the server or loosing any DOM modifications you may want printed.
As I understand, it's impossible to implement iframe printing without opening new window.
My print function:
if ($.browser.opera || (/chrome/.test(navigator.userAgent.toLowerCase()))) {
var href = contentWindow.location.href;
href = href.indexOf("?") > -1 ? href + "&print=1" : href + "?print=1";
var printWindow = window.open(href, "printWindow", "scrollbars=yes");
printWindow.focus();
}
else {
contentWindow.focus();
contentWindow.print();
}
Also I added the following code to the end of the body (when print==1):
<script type='text/javascript'>
function invokePrint() {
if (document.readyState && document.readyState!='complete')
setTimeout(function() { invokePrint(); }, 50);
else if (document.body && document.body.innerHTML=='false')
setTimeout(function() { invokePrint(); }, 50);
else {
focus();
print();
}
}
invokePrint();
</script>
I cannot reproduce your problem with Chrome. Opera, however, does indeed still print the entire outer page when trying to only print the iframe.
I have devised a workaround and although it does work mostly, it is not 100% failsafe (amongst others because Opera wraps lines for printing; I don't know how to calculate the correct height in such cases). That said, the following code works at least reasonable (using jQuery for convenience):
if ($.browser.opera) {
var ifr = $('#youriframe');
var ifrbody = ifr.get(0).contentDocument.body;
var sheet = $([
'<style type="text/css" media="print">',
'body * {',
' display: none;',
'}',
'#youriframe {',
' border: none;',
' display: block;',
' height: ', ifrbody.scrollHeight, 'px;',
' margin: 0px;',
' padding: 0px;',
' width: ', ifrbody.scrollWidth, 'px;',
'}',
'<\/style>'
].join(''));
$('head').append(sheet);
window.print();
sheet.remove();
}
Hope this helps.
I tried above code and after making changes to the above codes I came with conclusive code as follows
var win=window.open('about:blank');
win.document.write('<html><head></head><body>');
win.document.write('<iframe frameBorder="0" align="center" src="'+window.location.href+'" onload="test()" style="width: 619px; height: 482px;"></iframe>');
win.document.write('<scr'+'ipt>function test(){window.focus();window.print()}</sc'+'ript></body></html>');
win.document.close();
if (window.focus) {win.focus()}
try this one
Related
I have two buttons are set position equal to "absolute", when the LastPass addon's bar dipslays, they displays wrong because LastPass had inserted an iframe to my webpage:
LastPass iFrame
<iframe id="lpiframe74158812" src="chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/overlay.html?&add=1" scrolling="no"
style="height: 27px; width: 1263px; border: 0px;"></iframe>
The CSS:
.button-bar {
width: 175px;
float: left;
top: 113px;
text-align: right;
right: 20px;
position: absolute;
}
Image: http://i.stack.imgur.com/Rq5Z5.png
How can I avoid this case? Thanks so much!
I had this same issue and I found that last pass editing the DOM of my webpage! LastPass had added a div right after the body tag of my page.
<div id="lptopspacer48468746" style="height: 27px;"></div>
It looks like the div id is random, so I can't strip it out. I think this problem is with lastPass. I don't think there is a way to truly fix it.
Also annoyed by this <div id="lptopspacer[0-9]+" style="height:40px"></div> inserted in any page monitored by firefox lastPass plugin (after the site has shown a login form), I've come up with a jQuery solution.
Only adding some CSS rules don't seems to works as the div is obviously added after page load by a script. Changing style or trying to remove the div just after page load doesn't works either.
So this snippet run a delayed function to hide the div when found, or stop running after 5 attempts if no lastPass plugin is affecting the document.
<script>
var log = function(msg) {
if (console && console.log){
console.log(msg)
}
};
$(document).ready(function(){
var maxTry = 5, lptopHideTimeout;
var clearLptop = function(delay) {
var $lptop = $("div[id^='lptopspacer']");
if (lptopHideTimeout) {
window.clearTimeout(lptopHideTimeout);
}
if ($lptop.length && $lptop.is(':visible')) {
log("** Hiding lastPass lptopspacer...");
$lptop.css( "display","none" );
}
else {
maxTry -= 1;
if (maxTry > 0) {
log("## No lastPass lptopspacer div found yet. Retrying in " + (delay/1000) + ' second...');
lptopHideTimeout = window.setTimeout(function(){
clearLptop(delay);
},delay);
}
else {
log("## Giving up after too much attempts.");
}
}
};
clearLptop(500);
});
</script>
Better late than never if others also are having this problem. I had it to, that Lp spacer, in my case it was generated because I had Mcafee safekey installed on the computer. It showed up with a notice on every pageload on my website and caused an lp spacer that broke my site with a white bar on top.
Uninstalling Mcafee safekey solved it for me.
Good morning all,
I have to show a 16x40 pixel image in a jqGrid column, that changes when I click
on it; at this purpose, I defined my formatter as follow:
function dataViewLink(cellValue, options, rowdata, action)
{
var chartLink = "<div style='float:left;'><img id='_addtochart" + options.rowId + "' class='ui-icon-addtochart' onclick='devToggleChartChecked(" + options.rowId + ")'></img></div>";
return chartLink;
}
and created two CSS classes with different images:
.ui-icon-addtochart
{
content: url(../images/addtochart.jpg) !important;
}
.ui-icon-removefromchart
{
content: url(../images/removefromchart.jpg) !important;
}
then, I dynamically switch these classes using jquery. Everything
works fine on chrome, but there is no way to get it working on firefox.
The images does not show on firefox.
I have already found an issue related to the 'content' attribute on firefox:
Content url does not display image on firefox browser
and tried all the suggested workarounds, but none of them worked for me.
I cannot show these images with firefox.
This little problem is driving me crazy. Does anyone have any suggestion?
Thank you very much in advanced.
Bruno
It seems I found a solution; I changed my formatter with:
function dataViewLink2(cellValue, options, rowdata, action)
{
var chartLink = "<div style='float:left;' id='_addtochart" + options.rowId + "' class='ui-icon-addtochart ui_add_dev' onclick='devToggleChartChecked(" + options.rowId + ")'></div>";
return chartLink;
}
and the CSS classes:
.ui-icon-addtochart
{
background: url(../images/addtochart.jpg);
height: 16px;
width: 144px;
}
.ui-icon-removefromchart
{
background: url(../images/removefromchart.jpg);
height: 16px;
width: 215px;
}
it works both on chrome and on firefox.
Thank you very much anyway!
Bruno
When messing around in the FireBug css panel, you change the their representation of the original css file. Like:
.myCssClass { width: 100px; }
However, if you add a jQuery line to this,
$(".myCssClass").css("width", "200px");
you end (of course) up with changing the style tag for this element and you see that your original width:100px has a strikethough in the FireBug representation.
So my question is, do you know a way to change the "original" width:100px instead of changing the style tag. I guess you have to through a FireBug extension to access that property, and that is not a problem for me. But I don't know where to start :)
Edit: Have to point out that I am need to change the property by code! Either from a FireBug extension or somehow reload the corresponding css so that FireBug think it is the orginal value.
Here is an old JS function that usually worked well for me (Before Stylish and Greasemonkey).
Note that plain JS has security restrictions from accessing some stylesheets. A FF add-on can get around that, but then you need to also beware of corrupting browser-chrome styles.
function replaceStyleRuleByName (sStyleName, sNewRule)
{
var iNumStyleSheets = document.styleSheets.length;
var bDebug = 0;
if (bDebug) console.log ('There are ' + iNumStyleSheets + ' style sheets.');
for (iStyleS_Idx=0; iStyleS_Idx < iNumStyleSheets; iStyleS_Idx++)
{
var iNumRules = 0;
var zStyleSheet = document.styleSheets[iStyleS_Idx];
if (zStyleSheet)
{
/*---WARNING!
This next line can throw an uncaught exception!
Error: uncaught exception:
[Exception... "Access to restricted URI denied" code: "1012"
nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)"
location: ... ...]
*/
//--- try/catch for cross domain access issue.
try
{
var zRules = zStyleSheet.cssRules;
if (zRules)
{
iNumRules = zRules.length;
}
}
catch (e)
{// Just swallow the error for now.
}
}
if (bDebug) console.log ("Style sheet " + iStyleS_Idx + " has " + iNumRules + " ACCESSIBLE rules and src: " + zStyleSheet.href);
//for (var iRuleIdx=iNumRules-1; iRuleIdx >= 0; --iRuleIdx)
for (var iRuleIdx=0; iRuleIdx < iNumRules; ++iRuleIdx)
{
if (zRules[iRuleIdx].selectorText == sStyleName)
{
zStyleSheet.deleteRule (iRuleIdx);
if (bDebug) console.log (sNewRule);
if (sNewRule != null)
{
zStyleSheet.insertRule (sStyleName + sNewRule, iRuleIdx);
}
//return; //-- Sometimes changing just the first rule is not enough.
}
}
//--- Optional: Punt and add the rule, cold, to any accessible style sheet.
if (iNumRules > 0)
{
if (sNewRule != null)
{
try
{
zStyleSheet.insertRule (sStyleName + sNewRule, iRuleIdx);
}
catch(e)
{// Just swallow the error for now.
}
}
}
}
return;
}
Sample Usage:
replaceStyleRuleByName ('body', '{line-height: 1.5;}' );
replaceStyleRuleByName ('#adBox', '{display: none;}' );
replaceStyleRuleByName ('.BadStyle', null );
Just right click on the property in question and then edit [stylename]
Look for the "Computed" tab, it displays the actual values used of the properties of an element. The "Style" tab only displays the "stylesheet values" that affects a particular element, which may or may not be actually used by Firefox due to CSS' cascading rule and other layouting considerations.
I am using SimpleModal and i am opening an Iframe (using ff)
it seems to work ok in ie9 but in ff it is calling the iframe src twice
Thanks for any help
the code i am calling looks like
function addNew(){
var src = "/php/ftp/parsehome.php?dir="+userDir+"&idx=new";
$.modal('<iframe src="' + src + '" height="445" width="800" style="border:0">', {
containerCss:{
backgroundColor:"#E1EFF7",
borderColor:"#00A99D",
height:450,
padding:0,
width:840
},
modal: true
});
}
I ran into the same problem. Looking at the plugin code...
// add styling and attributes to the data
// append to body to get correct dimensions, then move to wrap
s.d.data = data
.attr('id', data.attr('id') || s.o.dataId)
.addClass('simplemodal-data')
.css($.extend(s.o.dataCss, {
display: 'none'
}))
.appendTo('body');
data = null;
You can see the data is added to the page body with the line .appendTo('body'); to calculate the correct dimensions for the modal. If you comment out this line, it will prevent the iframe being called twice.
// add styling and attributes to the data
// append to body to get correct dimensions, then move to wrap
s.d.data = data
.attr('id', data.attr('id') || s.o.dataId)
.addClass('simplemodal-data')
.css($.extend(s.o.dataCss, {
display: 'none'
}));
data = null;
Not sure if this modification will cause your modal size to have the wrong dimensions, but my iframe was set to width=100% and height=100% so didn't affect me.
// I am trying to apply an "onfocus="this.blur();"" so as to remove the dotted border lines around pics that are being clicked-on
// the effect should be applied to all thumb-nail links/a-tags within a div..
// sudo code (where I am):
$(".box a").focus( // so as to effect only a tags within divs of class=box | mousedown vs. onfocus vs. *** ?? | javascript/jquery... ???
function ()
{
var num = $(this).attr('id').replace('link_no', '');
alert("Link no. " + num + " was clicked on, but I would like an onfocus=\"this.blur();\" effect to work here instead of the alert...");
// sudo bits of code that I'm after:
// $('#link_no' + num).blur();
// $(this).blur();
// $(this).onfocus = function () { this.blur(); };
}
);
// the below works for me in firefox and ie also, but I would like it to effect only a tags within my div with class="box"
function blurAnchors2()
{
if (document.getElementsByTagName) {
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
a[i].onfocus = function () { this.blur(); };
}
}
}
Thanks guys - I have gone for the css(a:focus):
img, a:focus{
outline: none;
}
It seems to be working right(tabbing is still working and the borders are gone when clicking) for me... in both ie and firefox. Will have to now retrofit some other links to use it...
Thanks again.
It's not recommended to blur. If all you're looking at doing is hiding the focus lines, use this instead:
a[i].onfocus = function () { this.hideFocus = true; };
This will work for all versions of IE. For other browsers (including IE8 in standards mode) you can set the outline CSS style to hide focus outlines:
a {
outline: none;
}
This would make your page much more keyboard friendly than blurring an element as it takes focus.
I would suggest using only CSS to remove the border.
img, a:active{
outline: none;
}
Or is there a specific reason why JS must be used?