I am trying to display a PDF in an iframe..So there are 2 frames and the bottom frame has the pdf. It is coded as;
<frame src="ebook.pdf" title="Content Frame" name="content" id="content" frameborder="0" border="0" noresize scrolling="yes" marginwidth="0" marginheight="0" noresizescrolling="AUTO" framespacing="0" />
For some reason, I am unable to scroll through the PDF in iPad Safari...More specifically within the iframe..
Is this a PDF issue or is it an iframe issue?
I have tried the using the instead of frame..Still does not work..
Please help.
Thank you.
When you insert the <iframe> into a <div> with height specification and set overflow-y to scroll (maybe auto i did'nt try) you can scroll using two fingers on iPad. It has no effect on pc browsers.
Heres a link to an iframe that doesnt scroll on the ipad:
I have to redesign all my pages in iWeb now since the iPad won't scroll iFrames made with iWeb on my iPad. I get quite a few hits from people using iOS.
Scrolling within frames is a tricky UX thing with the iPad -- try scrolling with two fingers. I don't know about PDFs, but that's how scrolling is done for other frames in Safari.
Use (iOS App) Opera Mini browser instead, when clicking on a pdf in Opera Mini it induces Safari to open the PDF in a non-frame mode. Weird I know but it works.
Related
We have a page that has a video on it, embedded with an iframe.
The iframe js code for the player has the following code in it:
m.default.focus(function (e) {
var t = e.playButton;
(0, y.focusElement) (t)
})
This basically makes the play button visible on the screen if it isn't already. Which is fine for stand alone videos, but not on a page where we have the video embedded.
What it does framed in on our page is cause the entire page to scroll to that content.
We'd like to prevent that if possible.
Here is the iframe code:
<div class="embed-responsive mb-5 embed-responsive-16by9" id="myFrame" style="height: auto;">
<iframe allowfullscreen="" class="embed-responsive-item" sandbox="allow-scripts allow-downloads-without-user-activation allow-same-origin" src="https://sourcefile.onthesamedomain.com" title="Video"></iframe>
</div>
We've tried the scroll to 0,0 on the parent but that didn't work.
Apologies, but I forgot to add that this is only an issue in Firefox. The other browsers work with the attributes on the iframe.
Any help would be appreciated.
The 3rd party owner of the js within the iframe ended up providing a fix. There was no way we could do this without the screen scrolling back and forth.
So I have a problem with using an embedded youtube video.
Here is my iframe code
<iframe width="560" height="370" src="https://www.youtube.com/embed/PrTXCPex_3o" allowfullscreen="allowfullscreen" frameborder="2"></iframe>
As you can see, I am using allowfullscreen, in fact, it works perfectly fine for Firefox. However, when I try it with chrome, it just sends me to the top of the page and freezes up there until I hit the escape key. It is almost like hitting fullscreen is making the browser go fullscreen (Like hitting F11 In windows) instead of the video.
Any help would be greatly appreciated!
Here is a live test website of my project so you guys can test it yourself with multiple browsers.
http://tech-solutions-llc.com
Thanks again!
I have a rather strange issue with my jPlayer. I have been using this player for about 2 years now, and it's worked great iframed from my server into a web page elsewhere. Recently I did move the players from GoDaddyto my hosted WHM server. I at least thought they worked properly after but now when you open a page with it the music names n title scrolls fine but no music.
But if you hit the pop out box upper right, a new pop out box appears, and it plays fine and no longer had the little square for the pop out. As an experiment I copied the pop out link back into the iframe and ended up the pop out link box wasn't there and still no music. I tried re-copying the entire player directory again from GoDaddy and had the same experience. Was there maybe a change with Chrome and iframe security?
If I put the link in the original iframe directly into the address bar in Chrome it works fine, as does the url that accompanies the pop out.
I'm a baby at best when it comes to this but often I don't hear from my developer for some time and I am trying to learn.
<IFRAME src="http://players3.djextreme.net/global/index.php?stream=8004" width="375" scrolling="no" height="350" frameborder="0"></iframe>
I can get to the various codes but this is the start. There are many players back ended into the same player vix XML file but none of that has changed. This also works fine in IE and Firefox.
It doesn't function in the Snippet because of strict security but it works in this `PLUNKER. I'm not sure what you are asking...
<iframe src="http://players3.djextreme.net/global/index.php?stream=8004" width="375" scrolling="no" height="350" frameborder="0" allowfullscreen></iframe>
Against my better judgement I've been forced into using an iframe to deliver HTML5 content via a CMS which can't manage the content by itself. The iframe and host page are on the same domain so I can communicate between them fairly readily.
The content in the iFrame dynamically resizes (it's an online payment page and has confirmation details/error messages for fields improperly filled in) and I'm using this JavaScript to resize it:
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document.body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
I'm using this code to display the iframe in the host page, the height is the maximum size the iframe page can reach:
<iframe id="iframe1" height="1550px" frameborder="0" width="100% marginheight="0" src="/something.html" scrolling="no" onload="autoResize('iframe1')"/>
To dynamically resize the page elements and for scrolling I'm using onclick events in the iframe code which communicate with the parent page:
onclick="setTimeout(function(){parent.parent.autoResize('iframe1');},10); window.parent.parent.scrollTo(0,500);"
The setTimeout is required because I have other scripts which run on the onclick events and I need them to fire first and resize the iframe page THEN tell the host page to resize the iframe.
This is working much better than I expected in Firefox and IE11 but it's not working in Chrome. Anyone have any ideas on how I can get this functionality working in Chrome?
I'm assuming it's just a few tweaks specific to Chrome but it's 8:45am and I've been working on it since 9pm last night so I'm at a bit of a loss.
Thanks,
Mike
Oh, credit where credit is due. I got the original resize code (first quoted block) from a StackOverflow post. I just forgot to bookmark the link!
There is a missing double quote in your iframe
that's the correction
<iframe id="iframe1" height="1550px" frameborder="0" width="100%" marginheight="0" src="/something.html" scrolling="no" onload="autoResize('iframe1')>
I have a simple iframe which is used to display a vimeo video on my site, as so:
<div class="video">
<iframe src="//player.vimeo.com/video/88893424" width="960px" height="540px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
And it works like a charm on all standard computer browsers. Ajax is used throughout the site, and transitioning between pages that have videos and don't work exactly as you would expect - Ajax grabs the new page content, slides it on, deletes the old content, and the video works perfectly.
However, on iOS Safari, the video does NOT load. The space for the video is reserved - the other content on the page flows around the area where the video should be, which tells me the div is loading, and the height and width information of the iframe element is being registered by the browser. But no video, nothing. Reload the new page, though, and the video is there and plays just fine.
So my question is: Why is the reload required? What could I be doing wrong that is causing the AJAX to fail? I have read several answers across SO that seem to incriminate header information and cross-site drama, but it is danced around and not explained. Can anyone give me a clear understanding of what's going on here?