I'm trying to implement this in Confluence pages.
Basically, I have a PDF file (exported from Powerpoint), which has hyperlinks embedded, so when you click on the links in the PDF it opens whatever page the link is.
This PDF file is opened within an iframe in the Confluence page (which is created using a custom user macro).
Unfortunately, on Firefox and IE, the PDF links open the new page within the iframe, rather than the parent window. Chrome's inbuilt PDF viewer works fine (opening in the parent window).
Also unfortunate is that I don't know much about javascript or HTML. The code we are using currently for the 'create iframe' custom macro in Confluence is as follows:
## #param Url:title=URL|type=string|required=true|desc=URL for the iFrame
<script type="text/javascript">
jQuery(function($) {
var ratio = Math.sqrt(2);
var target = $("#f");
function fixRatio() {
target.width("100%");
if (target.width() > 1000) {
target.width(1000);
}
target.height(Math.ceil(target.width() / ratio));
}
$(window).bind("resize", fixRatio);
fixRatio();
});
</script>
<iframe id="f" src="$paramUrl" width="100%" style="border:0">x</iframe>
Now, most of this is just to do with sizing the iframe approximately to the PDF file (for aesthetic reasons).
Basically what I want to know is how do I get any links from the PDF opening not in the iframe but in the parent window?
I thought about performing an operation on the iframe window unload, something like
window.onunload=function()
within the javascript, or
<body onunload="somecode">
in the HTML, but I'm not sure where to place it or what the code is that I would need to force the new page to be passed to the parent window and rendered there instead of the iframe.
I've tried
<base target="_parent" />
but because the PDF viewer is separate from the rest of the page in the iframe it doesn't seem to work.
Sorry I'm very new to this, we did get a someone to help us but he wrote the code then didn't stick around to help with any issues, and I've only seen my first HTML and javascript today! So trying to learn fast...
Thanks!
Related
I am implementing a component of a webpage where I have a base64 encoded image, and I'd like to open it full screen, ideally in a new window. Sometimes my component can be in an iframe. I'd like this to work very reliably and not to be intercepted by popup blockers.
I tried the following code:
<script>
function openScreenshot(b64data){
var w = window.open("", "_blank");
w.document.writeln("<body><img src='data:image/png;base64," + b64data + "'/></body>");
}
</script>
<a onclick="openScreenshot('base64data')">Preview image</a>
This works well when my component is not inside an iframe.
When it is inside an iframe I am getting a blocked page (with title about:blank#blocked).
Another thing I tried were the so-called Data URLs, but my browser blocks it because it is considered a top-level navigation.
Is it possible to do what I am trying to do? I did not anticipate this being so hard.
I am creating my portfolio using a Bootstrap template (Freelancer). I have an iFrame embed that displays an e-catalog (located in a pop-up lightbox). For some reason when opening my website on a smartphone device, the page redirects automatically to the fullscreen version of the iFrame website without any prompting or touching. I've tried the 'sandbox' tag and it does not seem to work, but perhaps I am using it wrong. To clarify, the site/iFrame embed loads fine on desktop, but on mobile it redirects the homepage.
This is the iFrame code:
<iframe src="http://www.zoomcatalog.com/catalogs/kts-spring-2014/" width="100%" height="630px" frameborder="0" scrolling="no"></iframe>
The website is http://www.danieltomasku.net
Do I need to add some JavaScript to prevent the window from opening automatically? If so, how do I implement this? Should 'sandboxing' have worked? Should I put a div around the iFrame?
Any help would be appreciated. Let me know if you need more info/code. Thank you.
The site you are opening contains the following:
var iRegex = /android|(iP(hone|ad))/i;
if(iRegex.test(navigator.userAgent)){
var url= "<...>" + window.location.hash;
if(true) top.location=url; else window.location=url;
}
This JS redirects the parent page (your page [top window]) to another URL if the useragent matches android/iphone/ipad.
Just make it a linked static image. Otherwise you'd need to write a script to detect the location change attempt and override it. Besides, the iframe is messing with the framed page's analytics, counting each page view on your site as a view for the framed page.
Love the site by the way.
I have an AngularJS application which runs under an iframe in a different website. I have the code of the website.
I need to open a new iframe to the same AngularJS application but to a different route. I don't want to load all the application again in the new iframe. I am looking for something that will duplicate existing instance of a window content, or maybe open a new iframe of the same application without loading the whole app again.
Here is the code explanation:
I have this html page:
<div>
<iframe src="www.myapp.com/books"></iframe>
</div>
www.myapp.com/books is an AngularJS application so it loads a lot of dependencies, execute a lot of code and make a few backend calls. I want to add a button that it's click will open another iframe to the html page:
<div>
<iframe src="www.myapp.com/books"></iframe>
<iframe src="www.myapp.com/names"></iframe>
</div>
The new iframe will open the same app but different route. Unfortunately this will cause a full loading of the application for the same iframe, and I am looking for a way to prevent this. Like cloning the same instance of the iframe and route to the new location without a full reload..
Any idea?
Lets talk JQuery on this one.
Say you have your nice iframe (iframes aren't actually very nice) element
<iframe id="original" src="www.myapp.com/books"></iframe>
take note of the id tag.
then you got your javascript, enclosed in tags
var newIframe = $("#original").clone();
$("body").append(newIframe);
LINK ---> Check this all out at JSFiddle <--- LINK!
The best thing to do is probably write the html/javascript/css of your application as text in the second iframe.
You can get the contents of the first iframe
page=$("#iframe1")).contents().find("html").html();
and then set it to your second iframe
var doc = parent.$("#iframe2")[0].documentElement;
doc.open();
doc.write(html);
doc.close();
You may not want to do a full copy like this, but I think this is a starting point.
I think it's mandatory that your application resides on the same domain of the website hosting it, or this will fail for cross-domain scripting security reasons. You would have to change the design of the whole thing if so, since you cannot manipulate an iframe on a different domain.
Information taken from How to insert html in iframe and Getting the html content of an iframe using jQuery
EDIT
What you want is probably not iframes. You can load the javascript for your application once in the main webpage. Then that javascript should download (or create) html elements, and inject them into a div. Doing so, the javascript for your application can manage as many subframes you want. The downside is that you must probably change a lot your application: now it is designed to be loaded as a webpage, and should be rewritten to be a js that manages some divs putting content into them. I don't see another solution, unfortunately.
I would like to be able to print a PDF document automatically when a user clicks on a print button. Currently what the way I am doing it is I render the PDF and save to the server disk and have it appear in an iframe then I tried to print the content of the iframe using javascript:print(). however what is printed is an empty html page.
I am doing this because using the norm HTML print is wrecking the layout of the webpage i am trying to print. so i'm rendering the page to a pdf format to print the webpage. i don't want the users to be able to save the pdf hence i am trying to slient print the pdf page. hence i am loading it in an iframe by changing the src in the code behind and re-rendering the page and then triggering the js script.
function printPDF(){
document.iframe_printArea.focus();
document.iframe_printArea.print();
}
I am wondering if it is possible to print a pdf document loaded in an iframe using print() or whether this is even possible. I have extensively googled on this and have yet to come up with any solutions that works for a web application. Most of the resources are devoted to C# windows app. The platform I am using is .NET C#.
First of all I'm very sorry for whom that have to deal with IE6.
There is an non-standard DOM event developed by Microsoft that fire before print. It's onbeforeprint event (docs). What you can do is hiding everything but the iframe and shrink the iframe to the window size before print. and after print reverse the document to normal statues with onafterprint event.
function window.onbeforeprint()
{
// hide other elements and shrink the iframe
}
function window.onafterprint()
{
// unde what heppened onbeforeprint
}
I want to open a remote url inside a javascript popup instead of doing window.open().
I came across libraries like lytebox,lightbox,thickbox which do that if the popup is opened from main webpage.
However my requirement is to open the popup from the link which occurs in a small iframe within the main page.( I can not alter the code of the main page, however Iframe webpage is fully in my control)
When I include those libraries in my iframe webpage, it opens the popup, but restricted only
to within iframe.How to make it appear over whole browser window ?
This is what i want : The user clicks on "click here" and it opens a javascript layer,not
restricted to within iframe.
you can just use
parent.document
from the iframe to access the parent window, if it is from the same domain. Otherwise, security concerns are raised.
You can inject the javascript by creating a script element in the parent's document, and then will be able to access the necessary functions.