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.
Related
Many times I am only interested in the first portion
and would like to make a "collage", say of arriving buses at nearby stops and fit more on a small screen.
I found I can use "iframe", but having the cursor in the frame of course scrolls the frame
rather than scroll me further down the web page. Just for variety I include an image too.
Is there a better way to post "heads" of web pages? (I probably know to little about CSS and Bootstrap, etc.)
Running the snippet here shows only the traffic cam, but pasting it for example into http://htmledit.squarefree.com/ or local html file runs just fine. https://codepen.io/pen/ shows pugetsound "refuses to connect".
<div class="thumbnail-container">
<iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_14961" frameborder="0"></iframe>
<iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_15540" frameborder="0"></iframe>
<img src="http://www.seattle.gov/trafficcams/images/WSB_Midspan_EW.jpg" width="400" /> <!-- or a placekitten.com ;-) -->
<iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_19930" frameborder="0"></iframe>
</div>
Just to show that there are other example applications I run into frequently
would be the weather for the next 2 days only, or the temperature for the last few days.
An answer to above would solve many problems.
height=380px http://forecast.weather.gov/MapClick.php?lat=47.578&lon=-122.403&FcstType=text&TextType=2
height 120px https://atmos.washington.edu/~neal/uwp/index72.cgi
If the issue is you do not want the iFrame to scroll, you can try:
<iframe src="" scrolling="no"></iframe>
iframe { overflow:hidden; }
I have a reCaptcha in an iframe on my page. The reCaptcha changes it size, but the iframe not. I saw a few topics that address this problem. They work if the content stays the same during page load. But they do not work if the content changes when the page is loaded, this is happening in my case.
So my question is: how do I make an iFrame adjust size when the page is loaded if the iframe changed size using only html, css and if needed javascript . This is my html code:
<div>
<iframe aura:id="vfFrame" src="/partners/B2B_ReCaptcha" frameborder="0"
width="100%" allowtransparency="true" />
</div>
Any tips on how to tackle this problem?
I'm trying to integrate wetransfer into a website through an iframe, but I'm having a problem when the page loads, it jumps half-way down page, so it focuses on the iframe, instead of opening at the top of the page.
From what I can tell, there is a script on the wetransfer site that's telling it to jump to that section, instead starting at the top of the page. How can I get it to ignore the script by wetransfer or after the iframe's loaded to tell it to move back to the top of the page?
With jquery I tried $('html').scrollTop(0); after initiating the iframe, but it still doesn't work.
On the website I have jquery calculate the height of the user's screen and then set the header to that size, with a full background and navigation and than the iframe starts below that. So setting the position to absolute or anything along those lines, wouldn't work.
I created a very simple jsfiddle example just to show how the page opens scrolled halfway down the page. It only does this when the iframe source is wetransfer and not with any other source.
https://jsfiddle.net/dbruning22/c0s6mhkv/6/
HTML
<header>
Some Header information and navigation
</header>
<div class="main">
<iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</div>
CSS
header {
background: green;
height: 600px;
}
This worked for me:
1) You initially hide the iframe by setting the display to none:
<iframe id="bmap" src="xxx.xxxx.xxx" style="display:none;" frameborder="0">
2) Once the page has loaded, then show the iframe using jquery or javascript:
window.onload = function ()
{
$("#bmap").show();
}
This worked for me across browsers
You can put an anchor at the top of your page like this:
HTML
<header>
<a id="focus" href="#focus"></a>
Some Header information and navigation
</header>
On page load use this JS:
document.getElementById("focus").focus();
As none of the above worked for me after numerous tests, another trick, because a lot of sites now have a "scroll to top" button, especially useful if page structure cannot be easily modified (like a wordpress theme ...):
jQuery(".scroll-top-button").trigger("click");
Just forcing a click on that button ... that is really cross browser :-) (if jquery supported of course) ....
This is quite a blunt solution, but you can block all scripts from running in the iframe using the sandbox attribute.
<iframe src="https://example.com" style="width: 100%; height: 250px" sandbox>
NB: An empty value blocks all same-origin resources, including images. You might prefer sandbox="allow-same-origin".
I have a webpage that I would like to embed within another page. On the page that is to be embedded I have some window.onload javascript that will load a PDF document via the embed tag. If I use just the Iframe tag like this:
<iframe name="content" id="iframe" allowtransparency="true" src="Pages/menu.html" scrolling="no"></iframe>
The Javascript will run just fine. But I am trying to create a background and border for the iframe so I have wrapped the iframe in a div like so:
<div id="content" class="border">
<iframe name="content" id="iframe" allowtransparency="true" src="Pages/menu.html" scrolling="no"></iframe>
</div>
As soon as I do it this way the javascript will not run. Here is the screenshot of what I am trying to do. I do not believe that the styling that is present on the div ( curved borders, gradient, etc is possible on an iframe)
I am using PDFObject to generate the PDF on the page. The iframe is also loading the company's external website in the content section on demand and this is what they want so unfortunately i have to use iframes. This has to be done without using anything except javascript as well otherwise I would just use php.
I have to post the SCREENSHOT outside of this site on photobucket due to restritions sorry:
http://i721.photobucket.com/albums/ww217/the_t3rminat0r/Capture-2.png
It looks margin property in div style (or border class in your example) causes the problem.
i am having this problem for a week couldn't figureout kindly help!
1.I have a dynamic news page.
2.below the news a comments page attached with an iframe.
3.comments page is having pagenation.
when user navigate trough pages in iframe parent page should scroll to iframes top for that i have used #top in iframe links its working in all browsers except in IE8 (i didn't check in other versions of ie though), so please help me out with it.
thanks,
eeswar
In the outer page, define a scroller function:
<script type="text/javascript"> function gotop() {scroll(0,0);} </script>
Then when you define the iframe, set an onload handler (which fires each time the iframe source loads i.e. whenever you navigate to a new page in the iframe)
<iframe id="myframe" onload="try { gotop() } catch (e) {}"
src="http://yourframesource" width="100%" height="999" scrolling="auto"
marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" >
</iframe>
The nice thing about this approach is it means you do not need to make any changes to the pages included in the iframe (and the iframe contents can happily be in another domain - no cross-site scripting issues).