I'm loading pdf's into an iframe on my web page by setting the src of the iframe to the path of the pdf document.
This works as I'd like for viewing the pdf.
The problem is that some of the pdf's have hyperlinks in them to external websites which, when clicked, load the external website in my iframe.
So my question is: is it possible to catch the pdf's hyperlink click in javascript in the parent browser window, set the target to either top or blank and then redirect the request?
Unfortunately the pdf's are supplied by a third party so I don't have access to change the documents themselves.
Some ideas:
You can try hooking into the iframe's load/readystatechange event to catch when the iframe is loading another url.
You can "poll" the iframe every n interval and compare the src attribute to the URL of the pdf.
After you catch the change, you can redirect and open a window with the proper url. But browsers may block the JS pop-up window.
Related
I am building a Chrome extensions which injects a decent amount of JavaScript, CSS, and HTML into the page DOM for the current webpage tab. It it does so to show a Modal window with my extensions functionality in that modal.
I cannot use the background or popup scripts to do what I need to do so I have to use a content script which injects into the actual page DOM.
My issue so far is I have to be super careful with CSS class names and JS as well as I have discovered if the page has a CSS class matching the name of any of my extensions CSS, my extensions ends up over-riding the pages CSS!
I have seen that some other extensions that have to do a lot of HTML, CSS, JS into the content end up injecting into there own Iframe in the page which helps prevent this name collision.
Is using an Iframe the standard best practice in this case?
One of the features in my extensions is to do full-page screeenshots which require my contnet.js script to send a message to my background.js script which is responsibble for calling the CHrome API and taking the screenshot of the current scroll position in the pages viewport.
user clicks button in DOM modal windows
content.js sends message to background.js with the coordinates of the viewport.
background.js takes the screenshot with those coordinates. THen sends a message back to content.js.
content.js then scrolls down the page to the next area of the viewport for the next screenshot and then sends those new coordinates back to background.js.
this cycle continues until a shot of the whole page is made and stiched together and then sends back the URL of the new image to content.js when done.
Because both the Chrome API needs to sends messages back and forth between my content.js and background.js and then also if there is an iframe the iframe has to send messages back and forth with the page and the iframe.
Because of this I am not sure if I could use an iframe or not even?
Also if I did use an iframe, it would not load the content from a remote server but instead would be loaded into the page as html.
So is there a best practice for doing this?
Use inline styles instead
You can wrap your css in content.js then apply it to your target elements, it won't interfer the original design of the webpage
Use Shadow DOM
It provides encapsulation for js/css and makes it easy to ensure your components separate from the DOM of the main document.
I want to apply css to google calender iframe. I had tried with Jquery but it gives JavaScript security error. However I also tried this link
Got success but many of its links goes to 404 page as it takes my domain as base URL
You will face a security error when you apply css using javascript to an iframe that contains a page in a different domain. but this problem has a workaround by using document.domain if both documents are on the same top level domain, are using the same protocol & you can add the following line of JavaScript to the page in the iframe:
document.domain = "example.com";
the page containing the iframe needs the same line to make the domains match. Once this is in place, the script running on your main page is allowed to access properties of the document in the iframe element –
You cannot apply css to a iFrame ...
An iframe is a 'hole' in your page that displays another web page
inside of it. The contents of the iframe is not in any shape or form
part of your parent page.
From here
The reason behind that is security. If you have blabla.com in one
window and gmail.com in another one, then you’d not want a script from
blabla.com to access or modify your mail or run actions in context of
gmail on your behalf.
From here
If the iFrame is on the same domain and it doesnt violate the "Same-origin policy", you can work around this situation like this:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
Solution posted here
Anyway, if you are not violating the "Same-orgin policy", you probably don't want to use an iFrame.
I am trying to load a webpage say "a.html" in a frame in the page "b.html". Also, i am running the script which replaces the url with "a.html" using history.ReplaceState({},"","/a.html") in "b.html". I am running the above script before iframe gets loaded i.e. url of the window changes from "b.html" to "a.html". But as soon as the url changes to "a.html", "a.html" page doesnt load in iframe. Whereas, if i dont run the above script, "a.html" page gets loaded in iframe. Can anyone please tell me why the webpage doesnt load in iframe?
Thanks in advance.
I cannot figure out any way to prevent that behavior with hyperlinks inside a PDF document. Is there any way to achieve this?
We cannot replace iframe with object or embed tag.
# Jared Farrish: Nope, we want to prevent links in a PDF document being added to browser's history. For example, a PDF document is loaded in an iframe, it also contains links to other pdf documents. When users click on a link, new pdf one is loaded into target iframe, also an entry is added into browser's history. I need to prevent that.
#GolezTrol: Because it's the requirement, if you place it in an embed or object tag, when clicking on a links, your site will be redirected to another new pdf document. I need to load a new pdf document without navigating away the current web page.
At least in my test using FF4 and Chrome (latest), using a Javascript appendChild did not add it to the history.
var iframe = document.createElement('iframe');
iframe.src = "https://web3.unt.edu/riskman/PDF/UNTSafetyManual__Revised__3-2-06.pdf";
document.body.appendChild(iframe);
http://jsfiddle.net/ZML3u/
I am using an .ASHX handler to return images from my ASP.NET app. When I use the browser to hit the URL directly (example):
http://localhost/myapp/GetImage.ashx?key=12
it works fine... image shows up on the page. but when I use that same link as a target in Thickbox... I get this:
alt text http://franceschina.net/temp/thickbox.png
the distilled version of ASHX the code:
byte[] img = (byte[])pp.PRODUCT_PHOTO1.ToArray();
context.Response.ContentType = "image/JPEG";
context.Response.OutputStream.Write(img, 0, img.Length);
any idea what I'm missing?
http://drupal.org/node/140371:
In the Thickbox module, the main *.js file, thickbox.js does not account for image urls created in drupal, e.g. via /image/view/2321/preview instead of /image.jpg (or *gif or *png). If thickbox.js does not see the file name itself (gif, jpg, png, jpeg) in the link anchor tag (the [a href ...] tag), it will treat the image like another mime type that is not an image. This causes Thickbox to spit out God-awful garbage on top of your page instead of a cool shadowbox (lightbox) effect.
Looks like the same issue you're having.
well I ended up using the iframe option of ThickBox to load my image with another page. I don't love this solution (it requires a separate page and extra code to determine the optimal height/width of the iFrame)... but it works and I don't have any more time to mess with it