iframe sandbox not respecting multiple allow permissions - html

I am trying to embed an Adobe Portfolio into an iframe without much luck. I need to include both images (which appear to have a JS dependency) and links to open in a new window.
The iframe"standbox" directive is not behaving.
I have tried many permutations of other directives and narrowed it down to "allow-scripts" and "allow-popups" that work separately but not together.
I suspect this is something to do with Adobe Portfolio itself but cannot figure out why!?
Please note - code snippet doesn't run fully as expected within stack overflow site - probably because they have their own standbox directive!
<html>
<head></head>
<body>
<style>
.fl {
width: 300px;
float: left
}
</style>
<div class="fl">
<h1>Images working</h1>
<h3>sandbox="allow-scripts" <br/> (script appear to be needed for images)</h3>
<iframe src="https://picturelinktest.myportfolio.com" sandbox="allow-scripts" height="350" width="200" ></iframe>
</div>
<div class="fl">
<h1>Link working </h1>
<h3>sandbox="allow-popups" <br/> works locally but seems not to work in this tool!?!?</h3>
<iframe src="https://picturelinktest.myportfolio.com" sandbox="allow-popups" height="350" width="200"></iframe>
</div>
<div class="fl">
<h1>Not working when both standbox directives are defined</h1>
<h3>sandbox="allow-scripts allow-popups"</h3>
<iframe src="https://picturelinktest.myportfolio.com" sandbox="allow-scripts allow-popups" height="350" width="200" ></iframe>
</div>
</body>
</html>

Related

Resizing iframe in squarespace to fit any screen size

I have the custom code I would like to display (see below), its the landing page of the website that I only want to view my p5.js sketch, so I embedded it as an iframe. The only issue now is getting the iframe to resize to the height of the screen, so my sketch can be fully visible on different screen sizes without having to scroll. Please help me solve this issue!
I entered the following code in Page-->Settings-->Advanced-->Header-->>>>
<style>
#site-title {display:none!important;}
#page.container {display:none!important;}
#siteWrapper.clearfix.site-wrapper {display:none!important;}
</style>
<script>
setTimeout(function(){
window.location.href = 'https://goodwellandbetter.com/introduction-and-curatorial-statement';
}, 300000);
</script>
<div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-6063a8fceb34c530581d6d9b">
<div class="row sqs-row">
<div class="col sqs-col-12 span-12">
<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_1_1617144028502_3267">
<div class="sqs-block-content">
<iframe frameborder="0" name="Outside the Form" width="100%" height="1080px" src="https://editor.p5js.org/mariamadam/present/SNlipKxEa" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
</div>
Try doing this
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>

Soundcloud breaks entire website below the embed?

I'm using Foundation on this website, I'm not sure if that's part of the issue, but I'm trying to embed Soundcloud into my client's website and it breaks the entire site that is below the embed! Any ideas why? I'm not sure what info you need other than this, let me know!
Here is the embed code:
<div class="large-12 columns">
<iframe width="600px" height="600px" scrolling="yes" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/109522071&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" class="soundcloud">
</div>
And below this I basically just have a footer, but it even cuts off some
< br > tags that I have. Any ideas?
Add in the closing iframe tag.
<div class="large-12 columns">
<iframe width="600px" height="600px" scrolling="yes" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/109522071&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true" class="soundcloud"></iframe>
</div>

How can I make an iFrame next to another iFrame?

Currently the way the code works is that it places the iFrame on the bottom on the bottom. I want the last two iFrames to be next to each other so that one can hold, lets say a menu and the other can hold another web page. They would need to be adjacent to each other. That is side by side (no pun intended)
Someone suggested float : left. I tried this and it did float left but it floated the iFrame above it one to the left and not the current iFrame.
Code:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com" width="600" height="200">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe src="http://www.w3schools.com" width="200" height="500">
<p>Your browser does not support iframes.</p>
</iframe>
//I want this right next to the second iframe that is 400 width
//which would fill the rest of the screen
<iframe src="http://www.w3schools.com" width="400" height="500">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
New Code:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com" width="600" height="200">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe src="http://www.w3schools.com" width="200" height="500">
<p>Your browser does not support iframes.</p>
</iframe>
//I want this right next to the second iframe that is 400 width
//which would fill the rest of the screen
<iframe src="http://www.w3schools.com" width="400" height="500" float : right>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
easily done, you just need to set the display to inline-block for those two iframes.
iframe:nth-child(2),iframe:nth-child(3){
display:inline-block;
}
here's an example.
iframes are somewhat frowned upon. You might like to consider using divs with ajax instead, utilizing the jquery $.load function to load whatever you like into them. You can read up on that here.
Hope that helps...
Here is my attempt... The width of the window has to be more than 600px for the last 2 iframe to be beside each other. I used a div with clear:both; to make sure the last 2 iframe are under the first iframe
CSS:
body{
margin:0;
padding:0;
width:100%;
}
HTML:
<body>
<iframe src="http://www.w3schools.com" width="600" height="200" style="float:left;"></iframe>
<div style="clear:both;"></div>
<iframe id="test" src="http://www.w3schools.com" width="200" height="500" style="float:left"></iframe>
<iframe id="test1" src="http://www.w3schools.com" width="400" height="500" style="float:left"></iframe>
</body>
DEMO
You can set the two lower iframes to be side-by-side by giving them the display: inline-block style, as lukeocom mentioned above.
However, you should also then give them box-sizing: border-box and wrap them in a div with style display: table so that their width includes the size of the border, or else they won't line up well with the top iframe, as in lukeocom's example.
Here's what I mean:
http://jsfiddle.net/L87PE/1/
Having done that, you could even give them widths as a percentage, eg. width: 34% and width: 66%, and have them fill the whole browser:
http://jsfiddle.net/L87PE/

How to display PDF file in HTML?

I have an auto generated PDF file by itext and I need to display that PDF file in HTML. My question is: How to display a local PDF file in HTML using pdf.js? Should that PDF file be generated by some standards?
Implementation of a PDF file in your HTML web-page is very easy.
<embed src="file_name.pdf" width="800px" height="2100px" />
Make sure to change the width and height for your needs.
I use Google Docs embeddable PDF viewer. The docs don't have to be uploaded to Google Docs, but they do have to be available online.
<iframe src="https://docs.google.com/gview?url=https://path.com/to/your/pdf.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
1. Browser-native HTML inline embedding:
<embed
src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
type="application/pdf"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></embed>
<iframe
src="http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&navpanes=0&scrollbar=0"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></iframe>
Pro:
No PDF file size limitations (even hundreds of MB)
It’s the fastest solution
Cons:
It doesn’t work on mobile browsers
2. Google Docs Viewer:
<iframe
src="https://drive.google.com/viewerng/viewer?embedded=true&url=http://infolab.stanford.edu/pub/papers/google.pdf#toolbar=0&scrollbar=0"
frameBorder="0"
scrolling="auto"
height="100%"
width="100%"
></iframe>
Pro:
Works on desktop and mobile browser
Cons:
25MB file limit
Requires additional time to download viewer
3. Other solutions to embed PDF:
https://mozilla.github.io/pdf.js
https://pdfobject.com
https://viewerjs.org
IMPORTANT NOTE:
Please check the X-Frame-Options HTTP response header. It should be SAMEORIGIN.
X-Frame-Options SAMEORIGIN;
If you want to use pdf.js, I suggest you to read THIS
You can also upload your pdf somewhere (like Google Drive) and use its URL in a iframe
or
<object data="data/test.pdf" type="application/pdf" width="300" height="200">
test.pdf
</object>
you can display easly in a html page like this
<embed src="path_of_your_pdf/your_pdf_file.pdf" type="application/pdf" height="700px" width="500">
In html page for pc is easy to implement
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%">
but pdf show in mobile by this code is not possible you must need a plugin
if you have not responsive your site. Then above code pdf not show in mobile but you can put download option after the code
<embed src="study/sample.pdf" type="application/pdf" height="300px" width="100%" class="responsive">
download
The simplest way is to use,
<iframe src="pdf-link">
</iframe>
and if its still getting downloaded instead of viewing, check the server response header, it should have, Content-Disposition:Inline and not, Content-Disposition:Attachment.
Portable Document Format (PDF).
Any Browser « Use _Embeddable Google Document Viewer to embed the PDF file in iframe.
<iframe src="http://docs.google.com/gview?
url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0">
</iframe>
Only for chrome browser « Chrome PDF viewer using plugin. pluginspage=http://www.adobe.com/products/acrobat/readstep2.html.
<embed type="application/pdf"
src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf"
width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"
background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21"
title="CHROME">
Example Sippet:
<html>
<head></head>
<body style=" height: 100%;">
<div style=" position: relative;">
<div style="width: 100%; /*overflow: auto;*/ position: relative;height: auto; margin-top: 70px;">
<p>An
<a href="https://en.wikipedia.org/wiki/Image_file_formats" >image</a> is an artifact that depicts visual perception
</p>
<!-- To make div with scroll data [max-height: 500;]-->
<div style="/* overflow: scroll; */ max-height: 500; float: left; width: 49%; height: 100%; ">
<img width="" height="400" src="https://peach.blender.org/wp-content/uploads/poster_bunny_bunnysize.jpg?x11217" title="Google" style="-webkit-user-select: none;background-position: 0px 0px, 10px 10px;background-size: 20px 20px;background-image:linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);cursor: zoom-in;" />
<p>Streaming an Image form Response Stream (binary data) « This buffers the output in smaller chunks of data rather than sending the entire image as a single block.
<a href="http://www.chestysoft.com/imagefile/streaming.asp" >StreamToBrowser</a>
</p>
</div>
<div style="float: left; width: 10%; background-color: red;"></div>
<div style="float: left;width: 49%; ">
<img width="" height="400" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot"/>
<p>Streaming an Image form Base64 String « embedding images directly into your HTML.
<a href="https://en.wikipedia.org/wiki/Data_URI_scheme">
<sup>Data URI scheme</sup>
</a>
<a href="https://codebeautify.org/image-to-base64-converter">
<sup>, Convert Your Image to Base64</sup>
</a>
<pre>data:[<media type>][;base64],<data></pre>
</p>
</div>
</div>
<div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
<video style="height: 500px;width: 100%;" name="media" controls="controls">
<!-- autoplay -->
<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/mp4">
<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg">
</video>
<p>Video courtesy of
<a href="https://www.bigbuckbunny.org/" >Big Buck Bunny</a>.
</p>
<div>
<div style="width: 100%;overflow: auto;position: relative;height: auto; margin-top: 70px;">
<p>Portable Document Format
<a href="https://acrobat.adobe.com/us/en/acrobat/about-adobe-pdf.html?promoid=CW7625ZK&mv=other" >(PDF)</a>.
</p>
<div style="float: left;width: 49%; overflow: auto;position: relative;height: auto;">
<embed type="application/pdf" src="http://www.oracle.com/events/global/en/java-outreach/resources/java-a-beginners-guide-1720064.pdf" width="100%" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html" background-color="0xFF525659" top-toolbar-height="56" full-frame="" internalinstanceid="21" title="CHROME">
<p>Chrome PDF viewer
<a href="https://productforums.google.com/forum/#!topic/chrome/MP_1qzVgemo">
<sup>extension</sup>
</a>
<a href="https://chrome.google.com/webstore/detail/surfingkeys/gfbliohnnapiefjpjlpjnehglfpaknnc">
<sup> (surfingkeys)</sup>
</a>
</p>
</div>
<div style="float: left; width: 10%; background-color: red;"></div>
<div style="float: left;width: 49%; ">
<iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true#:page.7" style="" width="100%" height="500px" allowfullscreen="" webkitallowfullscreen=""></iframe>
<p>Embeddable
<a href="https://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html" >Google</a> Document Viewer. Here's the code I used to embed the PDF file:
<pre>
<iframe
src="http://docs.google.com/gview?
url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
</pre>
</p>
</div>
</div>
</div>
</body>
</html>
The element is supported by all browsers and defines an embedded object within an HTML document.
Bottom line: OBJECT is Good, EMBED is Old. Beside's IE's PARAM tags, any content between OBJECT tags will get rendered if the browser doesn't support OBJECT's referred plugin, and apparently, the content gets http requested regardless if it gets rendered or not. Reference
Working code: https://www.w3schools.com/code/tryit.asp?filename=G7L8BK6XC0A6
<!DOCTYPE html>
<html>
<body>
<object width="400px" height="400px" data="https://s3.amazonaws.com/dq-blog-files/pandas-cheat-sheet.pdf"></object>
</body>
</html>
I've had something similar before and used normally tags
<strong>click here</strong>
but it's interesting to find out some other ways as above!
Also this method is useful:
Displaying pdf file on desktop and mobile browsers:
<object data="./filename.pdf" type="application/pdf" width="500px" height="600px">
<p>Your web browser doesn't have a PDF plugin.
click here to download the PDF file.</p>
</object>
Update - Adobe PDF Embed API
Adobe released their Adobe PDF Embed API which is completely free. Since they created the PDF format itself, their API is probably the best for this.
It delivers the highest quality PDF rendering available.
You can fully customize user experience and choose how to display a PDF.
You will also have analytics on PDF usage so you can understand how users interact with PDFs, including time spent on a page and searches.
All you have to do is create an api_key and use it in the code snippet.
Displaying PDF as buffer (local file for example)
Here is the example of the code snippet that you can just add to your HTML and take advantage of their API for displaying PDF if you have the buffer (local file for example).
<div id="adobe-dc-view"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content: { promise: <FILE_PROMISE> }
metaData: { fileName: "file_name_to_display" }
}, {});
});
</script>
You can use
<iframe src="your_pdf_file_path" height="100%" width="100%" scrolling="auto"></iframe>
Or, if you want to make it take up the whole page:
Link
I understand you want to display using HTMl but you can also open the PDF file using php by pointing out the path and the browser will render it in a few simple steps
<?php
$your_file_name = "url_here";
//Content type and this case its a PDF
header("Content-type: application/pdf");
header("Content-Length: " . filesize($your_file_name ));
//Display the file
readfile($your_file_name );
?>
The answer provided by gofilord is right but I might also add that if you create an empty bucket to pour your pdf into you should give it a src="" like...
<embed id="fooEmbed" src="">
...in the HTML and in the javascript...
document.getElementById('fooEmbed').src = 'bar.pdf';
...it will work. If instead you do this...
<embed id="fooEmbed">
...it will not work.
If you're working with a local file this is the solution that worked for me.
const objectUrl = URL.createObjectURL(file);
<iframe src={objectUrl} width="100%" height="100%" />
source: https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications

Embedded Youtube player not responding in Chrome

I'm using CSS to stylize a website and have an embedded youtube clip inside of several DIVs like so:
<body>
<div id="wrap">
<div id="outer">
<img src="images/sidebar.png"/ class="sidepic">
<div id="look">
<iframe width="500px" class="youtube-player" type="text/html" height="280px" src="http://www.youtube.com/embed/J-U9aYeLvX0?wmode=opaque&feature=player_profilepage&showinfo=0" frameborder="0" allowfullscreen seamless></iframe>
<img src="images/content-01.png" class="bigpic" />
</div>
</div>
</div>
This works fine in Internet Explorer, but doesn't work in Chrome. The video doesn't detect any hover or clicking, as though it's a static image or hidden.
I've tried to use the ?wmode=opaque / transparent tags recommended in other threads on this site, but it doesn't seem to work. Removing the iframe from the DIV tags allows the video to play, but distorts the rest of the page.