For utilising content script advantages, I tried writing html code inside my chrome extension and tried injecting it into a created iframe using content script. It actually works, however it seems blurry (I have tried --webkit-font-smoothing: antialiased - and also if I go to the direct URL of the html page inside the extension (http://chrome-extension://ext_id/views/my_html.html), it doesn't get blurred on the actual html).
var elt = document.createElement('iframe');
elt.id = 'my_iframe';
elt.src = chrome.extension.getURL('views/my_iframe.html')
elt.setAttribute('scrolling', 'no');
document.getElementsByTagName('body')[0].appendChild(elt);
This is the approach I used. And again, if I go to http://chrome-extension://ext_id/views/my_html.html it doesn't get blurry (please check image at the bottom).
So I started investigating what may be causing the issue.
First, I tried to inject live websites into the iframe through src attribute, and they don't get blurry:
elt.src = "https://example.com"
However, here, one thing I realised for iframe is that all the other URLs that I fetch seem like this in the Inspect Element.
The iframe element is openable and it has #document as child which has all the html content as grandchildren
However, my one looks like this on the DOM that it doesn't open and I don't have #document tag either.
Second thing I tried was getting the content of the html page using
$.get(chrome.extension.getURL('views/my_html.html'), function(data, status){
// and inject data inside the iframe, however that
// caused path errors of separated files such as css and js..
});
.. because in my html file, I included files as
<link href="/styles/my_css.css" rel="stylesheet" type="text/css">
<script src="/libs/jquery-3.2.1.min.js"></script>
Thirdly, I tried zooming on the page to see what's happening. When I zoom, it gets blurry and very interestingly, if I open Inspect Element, it gets zoomed it also which doesn't on any iframe or any other website. It seems like I have injected a JPEG image in the iframe; and even inspect element gets blurry inside the iframe
If I inject any website into my iframe, even if I zoom in 1) Inspect Element doesn't get magnified, 2) Even if I zoom, it doesn't get pixelated or blurry simply because it's code; however in my case, it's acting like an image.
It's driving me insane how and why this is happening. Do you have any ideas thoughts what may be causing it or how to overcome this issue?
For recreating the issue, you can follow this method
Also, I have created a simplified extension for replicating the issue: https://drive.google.com/open?id=1y0Dopp1GhU47tWhXgxoGUy3DaDsQDouc
Even an almost empty project, it's blurry:
However it doesn't on webpage URL to the same html
Related
I'm facing a rare issue with the modal I made. I had a iframe to load a embedded youtube video on the modal, it was working well on a separate HTML file (an empty) that I had created to test it.
When I tried loading it on a local template of the actual site the youtube video is truncated. And, when i press ctrl+shift+i (the console) the whole video comes out. I searched for any possible solution to the issue.
Can anyone help me. Attaching the photo beneath.
Guys I somehow fixed this issue.
Issues Faced:-
1) I noticed that the truncated video becomes full-sized when I pull up the console log (crtl+shift+i)
2)I tried reloading the div content using innerHTML
3)I tried applying min-height property, the div comes out in the full size but the video still remains the same.
How I fixed it:-
I removed the src from the iframe and then on the function to show the modal i added a line to set the iframes source. This somehow fixed my issue.
Addntly, I also removed all the previous changes made to the CSS and JS file, as listed above.
I know both the question and the solution sounds weird (It does to me too)
In my application, I am using iframe to display content dynamically within a page, from another domain.
The iframe src can also return a script sometimes. Issue is, in that script sometimes I am having the following part of code:
window.top.document.getElementsByTagName('body')[0].appendChild(data_to_be_appended);
As a result, some of the images are being appended to the parent body tag and overlayed on the actual output and disturbing the application view. I am having a couple of iframes displaying within the same page and having issue with displaying of application view due to this overlay.
Can anyone please let me know that, how I can overcome this overlay issue and display the src related content only within the iframe strictly.
I've looked through similar threads and tried everything that was suggested there to no avail.
I'm trying to replace an image after the page was loaded by changing it's src attribute once I have a new location. I want to replace the image with a local image.
Directly changing the src attribute via img.src = urlString; or using the setAttribute() method sets the src but doesn't redraw the image in the loaded page. I used window.alert(img.src); to check that the src attribute is really changed.
I've used the following code snippet from here to force a redraw.
var n = document.createTextNode(' ');
var disp = img.style.display;
img.appendChild(n);
img.style.display = 'none';
img.style.display = disp;
n.parentNode.removeChild(n);
Nothing seems to work. Is it because the page is loaded or is it because I am using a local file?
The local file is in %AppData%\temp, could this be a permission problem? The browser console doesn't throw any error. I do not want to refresh the entire page since someone could be typing in a form and they're going to lose their data.
Any input would be appreciated. Thanks.
EDIT : A bit of clarification.
I use an extension to inject a script in every window. Once a window loaded a page I send the images to another script for processing, the script then returns an event to the window with a location to a new file. Once the event is caught, a function is called to change the src attribute of a particular image. I've checked everything, the src is changed but the browser doesn't display the new image.
Another edit :
There doesn't seem to be a permission problem since I can access the file from the address bar using file:///pathtofile/. With external urls (e.g. http://) it seems to work even after page load. How can I make it work with local urls?
Firefox does not allow untrusted pages to load data from file:// URIs in any way. That includes loading images from file:// URIs.
To see why, consider what happens if a page does <img src="file:///dev/tty"> on Linux or Mac, for example. Similar issues exist on some Windows versions if you try to read from file:///c:/con and the like...
The client's website has product listings. The prices for the product are pulled dynamically in through an iFrame at the bottom of the page. There is Javascript on the page that automatically resizes this iFrame to the correct height based upon how big the iFrame content is, once it's loaded.
The client is reporting that when printing the page, they cannot see anything from the iFrame where the prices should be - apparently it is not printing in IE, just the main page itself.
I am on a Mac and so can't test in IE, so I'm having a hard time experimenting with this.
Can anyone clarify the expected behaviour in this situation? Is it possible to get IE to print both page and included iFrames by default, and if so, how would I go about doing this? I can only find examples for printing a specific frame from a parent window.
Thanks!
The expected behaviour should be what you're experiencing in other browsers. If the page is printed, the iframe should be printed along with it. It would be difficult to imagine that everyone else got it wrong and IE got it correct in this instance.
Below is a bit of speculation on what the issue might be, but without knowing more/seeing code it's difficult to know the specifics:
This issue could be due to some css that you may have on your page. I've read of similar iframe printing issues where the visibility was set to hidden initially resulting in the iframe not printing correctly. To get around this specific case the user had to set the width and height to 0px. Without knowing more about your site, I can not correctly predict that this is happening.
Another issue may by your dynamic resizing based on the contents of the iframe. A simple test would be to comment that section out and set a generic width and height on the iframe to see if the printing issue still occurs. Perhaps those dynamic styles are not being carried over to the print stylesheet and are not getting applied (therefore not appearing at all).
As a quick suggestion, look into css media types:
print
Intended for paged material and for documents viewed on screen in
print preview mode. Please consult the section on paged media for
information about formatting issues that are specific to paged media.
Helpful link: Print Specification
This was an interesting point, so I did a test using IE8 (on a server, not locally).
I printed in IE8 a web page that included an iframe of something that I built. And it printed some of the contents the first time (the other contents showed up black). The second time I printed, the iframe contents were all black.
However, in my example, the contents in the iframe are changing constantly (images and text that fade in and out) and the css background behind it is black.
This test has the contents of the iFrame on a different host server than the contents of the main page. But to my knowledge, there is a cross-domain policy file working here.
Cross-domain policy issues were my first guess, but it's entirely possible there is some issue with how internet explorer renders the screenshot when it sends it to the printer.
If you are using Javascript, then why not try window.print() function along with print media CSS.
I can't explain why IE isn't working, but maybe you can fix the problem by adding this part of code into the parent page, in order to force each iframe to be refresh :
$(document).ready(function() {
if($.browser.msie) {//Only for IE
$('iframe').each(function() {
$(this).attr('src', $(this).attr('src'));
});
}
});
To get the browser, i use this method.
And i don't use contentDocument.location.reload(true); method to be sure the iframe to be refresh. See SO topic.
Try this Plugin it will solved your problem
http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/
This works perfectly fine:
<script type="text/javascript">
$(document).ready(function() {
$.fancybox({'href' : 'http://www.cnn.com','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'});
});
</script>
That is, FancyBox opens and displays the CNN homepage. However, if I change the href attribute to "#pg"
and have the page coded this way:
<body>
<div id="pg"></div>
<script type="text/javascript">
document.getElementById("pg").innerHTML = "<!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><title></title></head><body>test me now</body></html>";
</script>
</body>
FancyBox opens but no text is displayed. (The text "text me now" is displayed in the #pg div element. Notice it is assigned to the DIV's innerHTML at the end of the page.)
Basically, I want to know if there is a way dynamically initialize a DIV's innerHTML property and display it as a FancyBox type iFrame? (The content of the iFrame will have a button that prints the iFrame's document.)
TIA
UPDATE: 07/28/12
As #arttronics suggested, I put together a jsFiddle
To summarize, ultimately the objective is to be able to click a button contained inside a FancyBox that prints the entire contents of the FancyBox without opening another window. (I want to use FancyBox as a report viewer for content parsed by Javascript.)
I assume that I need to display content using FancyBox's iframe player, but I could be wrong.
The jsFiddle shows:
The FancyBox is able to display text that validates as an HTML page using the inline player. The text can either be referenced via href or content.
However, when the player is an iframe and the content comes from href, then the FancyBox container is empty. If the contents comes from the content attribute, FancyBox shows a 404 error.
Simply comment and uncomment the jsFiddle code to see what I mean.
Any ideas for how I can meet my objective are appreciated and will get an up vote!
TIA.
Update: 07/31/2012
This new jsFiddle example: Iframe report viewer works but not in FancyBox
As you can see, I've tried several ways to display the iframe in FancyBox. And while FancyBox does display the contents of the iframe, the printing feature breaks.
I think one method for solving this problem would be to write the content of the myContent var to the FancyBox after it is loaded, but I can't (A) find the right DOM node to write to, and (B) I can't get FancyBox to display an iframe using its iframe player when the iframe src="about:blank".
Any suggestions? Or do you see a way to fix the jsFiddle example?
Do you really expect that <iframe src="#myID"></iframe> would open an element having id myID into iframe?
If you want to print content of the fancyBox, then you can add print button - http://jsfiddle.net/s3jRA/
Updated demo - http://jsfiddle.net/qVrLr/ - for creating and updating contents of iframe
As is often the case, I was looking at things backwards. The solution (with caveats) is this, rather than display a div element using the iframe player, hide an iframe in the html and display it using the inline player.
See this working example: jsFiddle
This solves the problem of being able to print dynamic content without opening another window. Additionally if the text overflows the FancyBox, the entire contents are still printed. (That's something I could not get to happen when I printed the FancyBox and changed the various page elements visibility styles to hidden).
Major Caveats
I've tested this in IE 8 and it works, however I still cannot get this to work in Chrome.
One reason for trying this approach was my assumption that I would be able to include within the dyanmic page content an #media print style. That technique does not work (in IE anyway) for some reason. However, inline styles do work as do HTML markup tags (notice the <strong> tag in the jsFiddle example: var myContent). So something is strange.