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. :)
Related
Is there a way to have an iFrame with full toolbar except for the download button.
On the web I found this solution
<iframe src="URL#toolbar=0" width="100%" height="100%"></iframe>
But as u know it removes completely the toolbar and I would love to actually keep it.
Basically:
this is how is normally and this is I would love to have it (or something similar).
I already know i cannot prevent ppl to download it in other way, but I'm only interest in this graphic difference
Thanks to anyone who could help me
Also I noticed that mozilla doesnt view iFrame, is there a way to allowed it or something similar?
I need something that ppl can use without changing configuration on their personal mozilla
The look that I'm looking for (asked by my boss) ->
Mozilla browsers have no problem with Iframe, but browsers are configured by users to their security preferences.
<iframe id="page2" height="50%" width="100%"src="http://africau.edu/images/default/sample.pdf#page=2"></iframe>
<iframe id="page1" height="50%" width="100%"src="http://africau.edu/images/default/sample.pdf#page=1"></iframe>
Same as the web page text and images, Audio or Video content, all pdfs are "Download first to view" does not matter if
A=Href
Embed
Iframe
Object (avoid as depreciated)
cUrl (Users direct get)
So why remove the button if its not showing in the frame due to any ad blocker or other user setting such as send downloads into external secured PDF viewer
Mozilla browser with pdf plugin or add-in or PDF extender same as Chrome/Edge
FireFox with a frame blocker active for the same page 3 blocked items.
If you wish to change the Iframe view you need to be the PDF viewer application, but there is no guarantee it is the one the user is viewing within.
Here is a demo of a browser viewer where the download and print buttons are removed. However Browsers need to allow the user to control their own view so I have also opened the download on the right in a companion viewer.
A PDF client cannot view a PDF unless it is Decrypted after a download thus their copy is available for view and edit.
My site is http://inquizgaming.info/
When you click a link here in edge, it gives you a message saying:
"This content can’t be shown in a frame
There is supposed to be some content here, but the publisher doesn’t allow it to be displayed in a frame. This is to help protect the security of any information you might enter into this site.
Try this:
Open this in a new window"
In chrome, the page just stays blank.
This doesn't make a lot of sense to me, as i am not framing (i.e. using ,, or etc.) these links.
The entire body of the code for that first "Join Discord" button is:
<section id="banner">
<div class="inner">
<h2>Inquisitional Gaming</h2>
<p>An open gaming community for all platforms!</p>
<ul class="actions">
<li>Join Our Discord!</li><br>
</ul>
</div>
</section>
And from this, i just can't seem to understand what the issue is. I've been looking all over online. I am new to html, css, and JS. I am a novice at website building, and i am sure the problem is somewhere im not thinking of.
EDIT: When i right-click (or hold on mobile) and open it in a new window, the link works fine. This is EXTREMELY frustrating.
http://68.185.245.9/ is your host IP. With what I'm gathering, you have an index file linking to your IP which in turn shows your page, but it's linking it with a frame and thus breaks the ability for your links to redirect you. Have your service provider reconfigure your DNS so it has an A record pointing towards your host IP.
If you open your site http://inquizgaming.info/ and right-click to inspect the HTML you see the <frameset border="0" rows="*,1">.
If you now click on a link on your site, the discordapp.com server answers with the HTTP-Header 'X-Frame-Options' set to 'sameorigin'. This Header indicates, that the browser is not allowed to render https://discordapp.com/invite/qDf8DG9 in the visiting browser.
You can read the details about the the HTTP-Header here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
As you cannot change the HTTP-Response from discordapp.com' you need to either remove the all the <frameset>, <frame> and <iframe> or you can add a target="_blank" attribute to every link referencing the external link.
If you open the link in a new window, and the link works perfectly fine, then try adding this to your <a> tag...
Join Our Discord!
The target="_blank" attribute tells the browser to open the link in a new window. Also, it's good practice to place out-going links (that contain content not specific to your website) in a new window.
EDIT: As others have said, your website code is placed within several <frame> tags. Some functionalities, such as the <a> tag, will behave differently. Inspecting your website (using developer's tools by pressing Ctrl+Shift+I on Chrome or Firefox) will show the firstmost tags being <frame> containers.
Can you save an edited HTML in the inspect element, to the browser? After I hit refresh, the web page goes looking back to normal and I want to keep it edited on my browser only for life.
You could press CTRL+S to save the page itself. But I suppose that is not what you want?
If it's a html from a page on the web you cannot. The only other solution (and I use it sometimes) is to create a local Chrome / Firefox extension that alters the DOM via Javascript.
If it's a html present on your disk you can do it with DevTools on Chrome.
you can do something like save un html code on notepad and save it as html or edit html code from inspect but those solutions will make static web page and there is no way to make it dynamic only if you change the source code of web page
I have a packaged app in Google Chrome to allow for serial communications. I need to make a pop-up help page to explain how to use it etc. I have tried several different ways that I can think of and have not found any information on here or Google itself on how to do this. Anyone have any ideas?
One way is to open a window with chrome.app.window.create and populate it with the help-file HTML. However, this won't allow navigation within that same window with an <a> tag. (It will navigate to an external browser window.) To get full-blown navigation, you can place a <webview> in the window, and put the help file there. The tag looks like this:
<webview id="webview" src="http://example.com/help" style="width:600px; height:500px"></webview>
I am trying to open a pdf from my JQM webapp. I have tried iframes/embed/object, and none of those work on an iphone like they do on a desktop browser (scrolling, zooming, etc). I have settled with simply opening the pdf via a link Link. This works fine in the standard browser because the user can simply use the browser back button to navigate back to my app.
The issue that I am having, is that when a user saves the page to thier home screen and opens it using the chromeless safari browser, they no longer have the browser back button. I have tried adding target="_blank" to the link, but apparently JQM hijacks the link and prevents opening in a new page, and I have been unable to get the hacks to work.
I have also tried pdf.js, but I can't seem to even get that to work as my javascript knowledge is fairly limited, and the examples are pretty advanced. The only tutorial that I found used an old version which I couldn't get to work.
Are there any ways to bypass the JQM in openning a link in a new window (which would in turn open in the mobile safari rather than my chromeless web app), or are there any other suggestions for how to open a pdf from a webapp?
Just disable the default jQuery Mobile behaviour, by specifying data-ajax=false.
For example:
Link
See http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
For my webApps I used https://docs.google.com/viewer to embed the pdf into my interface.
So, when I navigate the webApp by home screen icon, the app doesn't close when I open the pdf.
I met the same question: open pdf in webapp with html5.
I've tried several solutions: iframe、embed、pdf.js, but none of them is the best solution.
tips: iOS 9.x upper, open pdf with iframe only show the first page of the pdf file, and there will be a <img /> tag in the iframe body when you debug.
util now I still have this troublesome problem, anyone has solution please write your experience here.
Thank you.