How do I embed a Google Drive document into my Weebly site? - embed

I'm trying to embed my resume into a page on my weebly website. I've saved the file as a pdf, allowed link sharing, and followed the steps for embedding documents from Google docs. I've gotten as far as getting the file to display within the weebly app, but it doesn't appear live on the site once I publish it. The page just appears blank, though additional space appears to be taken up. Perhaps an important note is that I'm using my ipad to do this.
Here is the custom HTML code I'm using within iframe generated from the above mentioned website:
<iframe style="width: 900px; height: 900px;" src="http://docs.google.com/gview?url=https://ivanglinski.weebly.com/uploads/5/7/9/5/57950797/ivan_glinski_resume_3_24.pdf&embedded=true" height="240" width="320" frameborder="0">

Every Weebly site comes with an "Embed Code" element which is available in the Weebly Editor (while building/editing/updating your site and its pages).
Get the "embed code" from Google for the GDrive doc you want to embed.
Drag an instance of the "Embed Code" element onto the page of your Weebly site where you want the GDrive doc to be displayed.
Click on the element you just instantiated, and paste the "embed code" from Google for the GDrive doc (from step 1) into the appropriate configuration field of the Embed Code element.
Publish your site
Test things are working, and if not, you may need to adjust permissions on the GDrive doc.

Related

iframe with data URI is empty on Google webapp (Apps Script)

I would like to make a web app using Google Apps Script where users get pages of a pdf shown one by one.
Using a pdf library I can get the base64 data of each page of the pdf. But using none of these ways for displaying it works:
<object type="application/pdf" data="data:application/pdf;base64,...">
<embed src="data:application/pdf;base64,...">
<iframe src="data:application/pdf;base64,...">
Displaying an image using <img src="data:image/png;base64,..."> does work.
All mentioned methods do display the single pdf page when putting it in an html-document.
I thought it had to do with the https requirement mentioned on https://developers.google.com/apps-script/guides/html/restrictions, but looking at How can I refer to a Data URI in https? I learned the data URI should be https (since the Google web app is served over https).
Any suggestion, like forcing the data URI to be 'interpreted' as an https-URI OR converting the pdf page to an image (not prefered, since I figure it would produce unnecessary overhead), is welcome.
Since the single page pdfs aren't needed to be saved like that, saving each page on Google Drive and using its file-URL would also produce overhead (and is thus not prefered either).
If your pdf is located on your Google Drive, you can embed it with the preview link:
<iframe src="https://drive.google.com/file/d/XXX/preview"></iframe>
Whereby XXX is to be replaced with the file id.
Make sure to share the pdf as Anyone on the Internet with this link can view.

How to view PDF or DOC file in Browser without <iframe> tag

I am using HTML with JSF application in my project and also used ClickJack filter option. First I try iFrame, Object, embed for view pdf portion. I refer path in tomcat folder
<iframe src="/path/file.pdf"/>
at the time browser to show error message is To help protect the security of information you enter into this website,
the publisher of this content does not allow it to be displayed in a frame..
So I need any other way to display pdf or doc file in browser is possible?
Chrome, Edge, and other modern browsers can read PDF files within the browser natively. If you use a link like so:
My PDF
It should open a window like this:

HTML pages in the Dropbox Public folder

I dearly hope my first question here is 'acceptable', but I cannot find an answer anywhere - not even from an online Dropbox search.
As a web developer in training, I recently added an HTML file to my Public folder in Dropbox; it is meant as an example webpage for my 'portfolio'. The rendered page directly in Dropbox online links to a Dropbox CSS file successfully. Also, my local Dropbox images link and display successfully.
However, my link to a Dropbox audio file does not play - and neither does the video link to Youtube.
All 'src' and 'a href' links work fine when I render the page from my laptop Desktop Dropbox app; they link to external pages and audio and video files correctly. After researching, I had already changed the 'www' to 'dl' to my local Dropbox files, but that doesn't solve the issue of links working when rendered from the Dropbox server. The audio file works fine when accessing the file directly in Dropbox online using the player, so it's the HTML file that cannot 'find' the audio file from within the Dropbox server. Similarly, any hyperlinks to external sites, such as Youtube and my Linkedin account do not work by left-clicking or CTRL-click - the correct URL shows in the bottom-left corner but the link does not respond. Only right-clicking and 'open in another tab' works on links, thus 'escaping' the restriction of the Dropbox server.
I tried to provide as much detail here as possible so that you're fully aware of my situation. I hope someone knows how to 'free' these hyperlinks from the Dropbox server. I'll soon have my first website online, which will eliminate these issues - but I'm curious to solve this Dropbox problem. Thanks in advance.

Linking to another html page in Google Apps Script Not working in sandbox 'IFRAME'

In Google Apps Script: Using NATIVE sandbox mode:
Linking to another HTML page in Google Apps Script is working fine.
But when using IFRAME sandbox mode:
Unable to get links working in Google Apps Script when using sandbox mode of "IFRAME"
As per the above SO post I tried using target="_blank". As expected, when the link is clicked the page opens in a new window.
However -
Using target="_parent" in Chrome opens a new window each time, but Firefox is not working. According to https://developers.google.com/apps-script/guides/html/restrictions target="_parent" is not supported by HTML Service — this is probably why it behaves like target="_blank".
Using target="_self" in both Chrome and Firefox results in the first click opening in the same window but subsequent clicks bring up a blank page.
I want the page to load in the same window as my Apps script, as would occur when using target="_self" in an anchor on an unrestricted web page.
plz help me.
When using IFRAME sandbox mode, for <a>nchors to open in the same tab or window, target="_top" must be specified. Support for this was added to Google Apps Script in the latter half of 2015. Before this time unexpected behaviour resulted. From a Google Apps Script developer blog:
We have been working hard to improve IFRAME sandbox mode and have
added many features since then, including: Firefox support, file
uploads, top navigation support, and improved Google Picker API
support.
It's a doc error needs to fix with Google when using "SandBoxMode=IFRAME" currently. See Can't call a server function with a form with input type="file" when using SandBoxMode=IFRAME.
I've tested it works now by setting the HtmlService.SandboxMode.NATIVE
instead of working when HtmlService.SandboxMode is set to Iframe. Also reference to this related issue here.

View PPT files directly in an iframe (with Chrome Office Viewer?)

So I am currently working on a local web-based application. Here are the facts:
I am using the CSS page transitions found here:
http://tympanus.net/Development/PageTransitions/ Due to this, each "page" of my application is contained in it's own div in a single file.
Example:
<div class="pt-page pt-page-1">
<!-- Page 1 content goes here ... -->
</div>
<div class="pt-page pt-page-2">
<!-- Page 2 content goes here ... -->
</div>
...etc
The client wants to be able to view Powerpoint (.ppt) files directly on the web browser. To attempt a quick and dirty solution, I have installed the Chrome extension "Chrome Office Viewer" https://chrome.google.com/webstore/detail/chrome-office-viewer-beta/gbkeegbaiigmenfmjfclcdgdpimamgkj?hl=en to each machine(this application is going to be isolated to just four machines that will be using Chrome for the application, so usability isn't an issue here)
What I WANT to have happen is to link to the .ppt file in an iFrame in one of my <div> pages as seen above, so when the user clicks on a link to view the PowerPoint, the page transitions and the slides can be viewed within the iFrame due to the Chrome Extension capabilitiy.
What CURRENTLY happens is that as soon as the application loads, the page redirects to the browser FROM the original application page to a seperate page to view the .ppt file. I would like this to be done inside of the <iframe> as mentioned earlier instead of an entire page redirect...
Is this possible or am I limited due to the construction of the Chrome Extension itself? I can always have the client save their .ppt as images and then display those within a <div> page, but I figured the Chrome Extension would be the quickest solution. Any ideas? Thanks in advance.
You can use Google Drive web publishing and embed your documents by iframes.
https://support.google.com/drive/answer/37579
Try making a .html or .php (depending if you use php) and link the .ppt in it, and then just put that .html in an iFrame.
<div class="pt-page pt-page-1">
<iframe src="/page 1 file linked here"></iframe>
</div>
<div class="pt-page pt-page-2">
<iframe src="/page 2 file linked here"></iframe>
</div>
If it still redirects then its an extension thing.
Also in future try keeping away on reliance to extensions and browsers, they are not really reliable enough for commercial use.
And whats the intention of this system? If its gonna stay in the office for work why does it need fancy transitions?
EDIT:
If you need those .ppt files to be dynamic you can use PHP for dynamic .html creation.
http://www.microsoft.com/web/solutions/powerpoint-embed.aspx
This might help, unfortunately I couldn't find any other way, using iframe forces the browser to download the file, and embedding also doesn't work here. Moreover, this method also allows you to add controls below, and its almost same as an iframe window. :)