I have a web page with an embedded iframe (iframe contents hosted under the same domain). Inside that iframe there is a link that is supposed to open a PDF file in a new tab when clicked.
iframe inclusion HTML:
<iframe src="./pages/ins_and_outs/ins_and_outs.html" width="100%" height="800" frameborder="0" id="ins-and-outs" target="ins-and-outs" sandbox="allow-scripts allow-top-navigation allow-popups"></iframe>
iframe:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
...
Open our infographic
...
</html>
Chrome version: 52.0.2743.116 (64-bit)
OS: OSX 10.11.2
Upon clicking the link to the PDF in Google Chrome, it opens a new tab showing a blank page but with the PDF's URL in the address bar.
I first thought it was an issue with the PDF itself, so I manually copy pasted its URL in the browser's address bar but found it displayed without issues.
I then went on and tested my page in Firefox, clicking the link there resulted in the PDF displaying correctly in a new tab.
I've also tried placing the link outside the iframe for test purposes, which works as well.
My conclusion is that it's a specific issue with having a PDF open in a new tab by clicking a link in an iframe, and only in Google Chrome.
Any ideas to what exactly is causing this, and what kind of solution would be possible?
What I'm doing as a quickfix now is adding the "download" attribute to the link, so it no longer displays the PDF but just downloads it.
<a href="./ins-and-outs/downloads/ins-and-outs.pdf" target="_blank" download>Open our infographic</a>
I found something! I know your question was 2 years ago, but if you use the sandbox "allow-popups-to-escape-sandbox" in your iframe, this will work.
Here is an example:
<iframe id="blue" src="iframe.html" sandbox="allow-popups-to-escape-sandbox"></iframe>
Related
I used the tag to link a pdf (which is stored in a folder in my website) with the attribute target="_blank", but it doesn't work on mobile devices (android)
My code:
Catalogue
This works just fine on desktop, it opens the pdf in a new tab of the browser, as it should with the attribute target="_blank".
HOWEVER, I tested this on mobile and the result was:
It works on iPhone using safari, BUT it doesn't work on Android using Google Chrome. Instead of opening the pdf in a new tab it automatically downloads the file.
Is there any way to change this behaviour?
I've also tried using target="about:blank" instead, but it didn't work
Try using the rel=”noopener” or rel=”noreferrer” link attributes for every link.
The rel=”noopener” link attribute prevents the linked site from receiving access to the original web page that is linking out. This prevents the linked site from taking control or otherwise influencing the linking site.
The rel=”noreferrer” link attribute hides the referrer information from the site that is being linked to. When a site visitor clicks a rel=”noreferrer” link, the site being linked to won’t know what site referred the visitor.
For example, if you code a link like this:
<a href="https://www.example.com/" target="_SEJ" rel="noreferrer">
The above link will open in a brand new browser tab.
For further guidance do visit this site:
https://www.searchenginejournal.com/blank-link-attribute/435883/#close
I have an iframe with a src attribute set to a https pdf link. On firefox (99.0.1), my iframe displays correctly the pdf, but not on google chrome (101.0.4951.54). I have no extension installed on my google chrome, and found no errors or any logs in the console.
Chrome gives me a grey iframe like that:
(in english it says "This page has been blocked by Chrome")
I've went into the console, inside the network tab and here is the only useful information I've found:
I had the same issue but only on CodePen, which is displaying everything in an iframe, which was probably causing problems.
Once I created my own html file, everything was working correctly.
Both codes work correctly:
<embed
class="pdfobject"
type="application/pdf"
title="Embedded PDF"
src="https://africau.edu/images/default/sample.pdf"
style="overflow: auto; width: 100%; height: 100%;">
and
<iframe src="https://africau.edu/images/default/sample.pdf" width="500" height="375" />
Alternatively, you can used PDFObject package - "An open-source standards-friendly JavaScript utility for embedding PDF files into HTML documents."
https://pdfobject.com/
I am learning HTML from The World's Largest Web Developer Site w3schools.com
I am having an issue at this URL from HTML Links chapter.
The Homepage of World Wide Web Consortium (W3C)'s website opens when I click on the hyperlink https://www.w3.org/ but same is not the case when I click on a hyperlink https://www.google.com/ to open Google's homepage.
It's giving me error as "www.google.com refused to connect."
Why so?
This issue is coming when I tried to run the below code in W3Schools' "Try it Yourself" editor. When I tried to run the same below code from localhost in my web browser it worked perfectly fine and Google's homepage is opened.
Consider the code tried :
<!DOCTYPE html>
<html>
<body>
<h2>Absolute URLs</h2>
<p>W3C</p>
<p>Google</p>
</body>
</html>
So my question is what's the issue with W3Schools' "Try it Yourself" editor?
There is no problem, Google just don't allow you to put them in an iframe (which is what w3schools use). If you right click and press 'open in new tab', it will work.
If you inspect the website and open the console, you can see what the error is. In this case the output is: Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. Which means that google simply doesn't allow to display google.com on an iframe, which is what is being used by w3schools.
If I paste an html link with a href that doesn't start with http:// in an html editor in Chrome or Firefox, then result is not the same. Chrome keep the href attribute but Firefox removes it.
So if I paste a link (which has this source code Open PDF) in the HTML mode (not the source code mode) of an HTML editor in Chrome, and then them switch to the source code mode, I see the exact them source code as above. But if I paste the same link in an HTML editor in Firefox, I end up with this source code:
<a target="_blank">Open PDF</a>
The test can be done with Quackit.com. When I start Firefox in Safe Mode, then the href="zotero://open-pdf/0_123456" isn't removed.
How can I paste a link in an HTML editor in Firefox when its href doesn't contain an http://?
More background: I am creating this link with a python script based on HtmlClipboard
I tried all the solution on that page but without success. My issue doesn't seem to be the same. I don't have any trouble opening a local link with firefox: if I paste zotero://open-pdf/0_123456 in the url bar, firefox open the pdf. I have trouble pasting the html link in an html editor.
After all, it wasn't caused by Firefox but one of my extension because the problem disappears when Firefox is in safe-mode (on Windows, Windows + R and enter firefox -safe-mode). This doesn't resolve my problem, but at least it answers this question.
Thanks to jscher2000 for pointing that to me.
This is a weird one. I'm using the URL "http://www.craigslist.org/about/" as an example here.
I load up that page in my browser and modify it with Firebug. I add the following line right after the body tag:
<iframe src="http://www.craigslist.org/about/" id="frame1" name="frame1" width="100%;" height="200"></iframe>
The IFRAME shows as blank! Now when I load https instead of http in the IFRAME it works. At first I thought maybe craigslist doesn't allow itself to be embedded in an IFRAME at all. Then I tried embedding that same IFRAME code on my website and the frame loads as expected.
It's as if they are blocking you from loading the same page within itself!? Anyone ever seen this behavior before?
UPDATE:
This problem appears to be related to my browser. (Firefox 21) When I try to load any IFRAME that has the same exact URL as the parent frame it fails??