PowerPoint presentation in web Browser without using Google Docs - javascript

I trying to display my ppt for long time where the screen should run continuously in web page without using Google Docs or Skype Drive where the ppt file and html page is in my local folder but it is not showing in web page. The code is below :
<!DOCTYPE html>
<html>
<body>
<iframe src="lp.ppt" width="800px" heigt="600px" name="iframe_a"></iframe>
</body>
</html>
can anyone help to display ppt in html page.

I'd recommend the official View Office documents online
For embedding you can simply use code like below:
<iframe src='https://view.officeapps.live.com/op/embed.aspx?src={urlencode(site-to-ppt)}' width='962px' height='565px' frameborder='0'></iframe>

Related

Google Drive not Loading pdf Link

I shared the link to the file on Google Drive with anyone who has the link, and for some reason my PDF doesn't show up. It works for someone else's Google Drive link but not for my link.
I've tried sharing it with the whole internet on the UI in Google Drive but nothing changed. Just a blank page.
<!-- simple.html -->
<!DOCTYPE html>
<html>
<head>
<title>Google Drive not Working for Me</title>
</head>
<body>
<object data="https://drive.google.com/file/d/10IcEechL2QV5enxoec-B5jhfCaJ9xkzU/view?usp=sharing" width="600" height="750">
<embed src="https://drive.google.com/file/d/10IcEechL2QV5enxoec-B5jhfCaJ9xkzU/view?usp=sharing" width="600px" height="750px" />
<p>This browser does not support PDFs. Please download the PDF to view it: View the PDF.</p>
</embed>
</object>
</body>
</html>
I want to see my PDF, but all I see is a blank page.
Here's My Page not working.
Here's Someone else's Google Drive Link Working
Use the URL with /preview rather than /view as in your example;
https://drive.google.com/file/d/{fileId}/preview

using Javascript to locate an element in an Embedded web page which also in an embedded web page

I want to write a script to watch online courses automatically using Javascript. But when I want to locate an element in the html page,I find it was in an embedded web page which also in an embedded web page. I have been searching questions in Google and Baidu but I only find the way how to locate an element in an embedded web page. I also ask programmers around me but they also have no idea,oops. the following picture is the position of it("span" is the target).
<html>
<body>
<div class="main">
<iframe id="iframe" src="blala" allowfullscreen="ture" onload="clickImg()">
<html>
<body>
<div class="ans-job-icon">
<iframe src="video/blala" allowfullscreen="ture">
<html>
<body>
<span aria-hidden="true" class="vjs-icon-placeholder"></span>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</body>
</html>
Can you do me a favor? thx a lot.
Thank for all of your idea. With your advice, I finally work out this question with my friends. The solution is as
followed.
We find that “window" is one of the object in JavaScript, which can operate the element in "iframe". So you can use it to locate the tag in an embedded web page.
top
"top" is an attribute in the object window. By using the statement "window.top", you can get the top window in the web page. and then
Using the statement"window.top.iframe" to get the iframe object .
get the next iframe tag by object "document"
attribute "contentDocument" in iframe can be used to return the current document object. and then you can find the next iframe using the statement"window.top.iframe.contentDocument.getElementsByTagName('iframe')[0]"!

js/jquery - How to change existing iframe attribute from inside the iframe

I am working with TFS and I'm trying to upload an extension(web page) to the dashboard.
When the dashboard loads my extension it wrapps my it with Iframe.
TFS Iframe example
The iframe sandbox attribute missing the allow-same-origin which allow me to manipulate the page that contains my extension.
Is there a way to change the iframe attribute from my extension web page?
the whole page looks like:
<html> // Tfs page
<body>
<div> // main page
<iframe sandbox='allow-scripts ...'> // the iframe that wrapps my extension, missing 'allow-same-origin'
<html> // my extension
<body>
...
</body>
</html>
</iframe>
</body>
</html>
Thanks...
I think this is on purpose: you should use the SDK to interact with VSTS/TFS, otherwise it is easy to imagine a rogue Extension that sells a company's Intellectual Property in the deep web.

Show the PowerPoint presentation in web page using html

I trying to display my ppt with long time where the screen should run continuously in web page where the file is in my local folder but it is not showing in web page. The code is below :
<!DOCTYPE html>
<html>
<body>
<iframe src="lp.ppt" width="800px" heigt="600px" name="iframe_a"></iframe>
</body>
</html>
can anyone help to display ppt in html page.
You can use Google Docs to serve as your document viewer. You just need to upload your file and use the share link as the iframe src.
You can get the embed code by uploading your file and opening it in google docs (in this case, Google Slides) then click the file tab and click the Publish to the Web. From there you can copy the embed code. Make sure that the file is public! :)
<iframe src="https://docs.google.com/presentation/d/17nlO95lz91-shRep16UiJl-3EAxv-MnOFH718ku2gtw/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="749" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
<iframe src="https://docs.google.com/presentation/d/17nlO95lz91-shRep16UiJl-3EAxv-MnOFH718ku2gtw/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="749" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
Hope this helps!

Embed Google PhotoSphere (gapi.panoembed) using image NOT hosted on Google servers

Google has made it pretty easy to embed 360-degree panaroma shots (called "PhotoSpheres") from Android phones directly onto your own website through the plusone.js api
A very basic example is:
<html>
<head>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</head>
<body>
<g:panoembed imageurl="https://lh5.googleusercontent.com/-kr97Eucg6sM/UKGEuvo_eBI/AAAAAAAAi0s/adq8uqyhm_k/photo.jpg" fullsize="4096,2048" croppedsize="4096,1380" offset="0,480" displaysize="600,400"/>
<script>
gapi.panoembed.go();
</script>
</body>
</html>
However, this ONLY seems to work if the image passed in imageurl is hosted in Google+. Is there a way to use these images without first giving the image to Google? I take the panorama on my Android phone and can view the 360-degree magic on my device with no problem. I copy the image off my device and upload it to my web server, however if I link to my own copy of the image, the "magic Google stuff" does not happen. If I then upload the image to Google+ and then view it and get the URL and paste that in...then it works perfectly. I would sure like to skip the Google+ step and just use my images without giving them to Google.
Any idea how to get this working on images that are not Google hosted?
This project on github might be what you are looking for:
Photosphere - Github
If you use AngularJs, I developed a small directive right here : https://github.com/Gullfaxi171/angular-photosphere-directive
you'll just have to type :
<photosphere src="path/img.jpg"></photosphere>
in your HTML

Categories