My page jumps to the top when I embed this gdrive iframe, once you click on the iframe:
<iframe height="400px" frameborder="0" width="600px" src="https://docs.google.com/document/d/1u9NFjTPBd-9mucQUPvkqLP84iV6uaEcJNF5vQdHmYh8/edit?usp=sharing&rm=embedded"></iframe>
JSFiddle: https://jsfiddle.net/0qpe53os/
Question: Why does it do so and how can I prevent it from doing so?
I tried to preventDefault without any luck. Thanks a lot in advance for your help.
I'm not sure if this is useful. By the way you could use the onload attribute to scroll the page down:
onload="scroll(0,screen.height);"
<iframe height="400px" frameborder="0" width="600px" src="https://docs.google.com/document/d/1u9NFjTPBd-9mucQUPvkqLP84iV6uaEcJNF5vQdHmYh8/edit?usp=sharing&rm=embedded" onload="scroll(0,screen.height);"></iframe>
From my investigation, its not caused by the iframe itself. Its cause by the javascript executed by the embedded google docs. When the editing area of the google docs receives the focus this happens. If you access the menu area nothing happens unless it results something being added to the editing area. I tried restricting the iframe with sandbox attribute and this behavior no more happens, but of course you cannot use the google docs.
Sorry no solutions to suggest.
You could use javascript to check if the iframe is the active element and jump back to it if it is active.
if(document.activeElement.tagName == 'IFRAME') {
document.activeElement.scrollIntoView()
}
See this Jsfiddle for a working example.
Related
On my webpage, I've got several tabs and, in one of them, I want to display an iframe containing a Google Doc.
When the iframe is displayed, the google doc is loaded and there is no problem.
But by default, this tab is hidden (so, the iframe inside too)
Something like
<div id="tab-1">...</div>
<div id="tab-2" hidden>...</div>
<div id="tab-3" hidden><iframe src="https://docs.google.com/document/d/......../edit?usp=sharing&embed=true"></iframe></div>
with jquery to handle actions
And, when the iframe is hidden, it seems like it can't load until it's not hidden anymore. The problem is I endlessly get popup saying
This error has been reported to Google and will be examined as soon as possible. To continue, please refresh the page.
In a page without tab, if the iframe has the "hidden" attribute, the bug occurs too
I could get around the problem by "hiding" the iframe with a "heigth=0" but when it's hidden in a tab, the problem comes back
Have you ever met this problem and find a way to solve it ? Do I have to "dynamically load" the google doc iframe when it becomes visible ? (And then, how to ?)
Thanks
I don't mind if the iframe is loaded later so I decided to load the <iframe> with jquery, when the tab is opened, by storing the src into the attributes.
There could be problems though, if the tab is closed while the iframe is not fully loaded.
That's why I prevent this by stop loading if the tab is changed, (and don't if it's already fully loaded.)
html
<iframe data-src="https://docs.google.com/document/d/......"
class="google-doc"></iframe>
jquery
//Stops iframe loading
$(".tab-to-close iframe.google-doc").not('.isloaded').prop('src','')
//Change the tabs
$(".tab-to-close").hide();
$(".tab-to-open").show();
var iframetoload = $(".tab-to-open iframe.google-doc");
//Load iframes on the new tab
iframetoload.prop('src',iframetoload.data('src'))
//If it's loaded in time, save it so it's not destroyed on tab changing
iframtetoload.on('load', function(){
$(this).addClass('isloaded');
});
What are the possible ways in which I can preserve an iframe embedded in a view in between my route changes?
As the route changes from Route A-> Route B, Ember destroys the View for A. My View for A has an embedded iframe which I would love to preserve and not reload when Route A is revisited.
So far, I tried moving my iframe to a parent view that is not destroyed when exiting Route A but browsers reload iframes when you move them around in the DOM, so its a moot exercise.
Indeed nesting is the right choice for you problem of iframe.
Here is a detailled example with a counter to see when the iframe is reloaded.
|-home
|-about
|-elsewhere
This important part of the fiddle is :
<div class="border-row">
This is home
<iframe src="http://emberjs.com/" width="100%" height="150px" onload="App.HomeController.countLoadings()"></iframe>
count : {{App.HomeController.loadcount}}<br/>
isDestroying : {{isDestroying}}<br/>
isDestroyed : {{isDestroyed}}
</div>
{{outlet}}
You can see that the iframe only reloads when you actually move to another part of the hierarchy route. If you navigate between home and about, the iframe stays the same.
I am Using the XFBML of Social Plugins I created the Popup For this and Place the XFBML Code For Testing. Like Button is Working Fine. After Like Post to Facebook Box is not Appearing Properly. I am Not Sure Why this Happening. I attached the Screenshot for this one
Any Suggestion Would Be Great. I am Using this code on Wordpress Site.
Thanks in Advance.
Try to turn off "sending" and "show faces" functions for it. XFBML code should thendisplay the button look something like this:
<fb:like href="yoursite.com" send="false" layout="box_count" width="150" show_faces="false"></fb:like>
Other thing could be that the FB button is partially overlayed by another layer. Try to wrap the code above to <div></div>, create a class for this div like that <div class="myclass"></div> and then use a z-index css property like this:
.myclass {
z-index: 1;
}
Heres a tricky one . .
I have a webpage (called PageA) that has a header and then simply includes an iframe. Lets call the page within the iframe PageB. PageB simply has a bunch of thumbnails but there are a lot so you have to scroll down on PageA to view them all.
When i scroll down to the bottom of the pageB and click on a thumbnail it looks like it takes me to a blank page. What actually happens is that it bring up the image but since the page that is just the image is much shorter in height, the scroll bar stays at the same location and doesn't adjust for it. I have to scroll up to the top of the page to view the picture.
Is there anyway when i click a link on a page that is within an iframe, the outer pages scroll bar goes back up to the top
thks,
ak
#mek after trying various methods, the best solution I've found is this:
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).
Javascript is your best bet. You can use the scroll() method to scroll back up to the top of your IFRAME. Add a javascript handler in the body load so that each time you click a thumbnail, call a function that calls scroll() to scroll up.
I've spent a considerable amount of time trying to figure out how to scroll to the top of the iframe from within the PHP code I was calling (from within the parent ASP.NET page). I never figured I could scroll to the top using the same javascript but in the iframe's onload event. Thanks!
What is the best way to keep an asp:button from displaying it's URL on the status bar of the browser? The button is currently defines like this:
<asp:button id="btnFind"
runat="server"
Text="Find Info"
onclick="btnFind_Click">
</asp:button>
Update:
This appears to be specific to IE7, IE6 and FF do not show the URL in the status bar.
I use FF so never noticed this, but the link does in fact appear in the status bar in IE..
I dont think you can overwrite it :( I initially thought maybe setting the ToolTip (al la "title") property might do it.. Seems it does not..
Looking at the source, what appears is nowhere to be found, so I would say this is a browser issue, I don't think you can do anything in code.. :(
Update
Yeah, Looks like IE always posts whatever the form action is.. Can't see a way to override it, as yet..
Perhaps try explicitly setting it via JS?
Update II
Done some more Googleing. Don't think there really is a "nice" way of doing it.. Unless you remove the form all together and post data some other way..
Is it really worth that much? Generally this just tends to be the page name?
I don't see a link, I see this:
javascript:__doPostBack('btn','');
EDIT: Sorry, was looking at a LinkButton, not an ASP:Button. The ASP:Button shows the forms ACTION element like stated.
But, if you are trying to hide the DoPostBackCall, the only way to do that is to directly manipulate window.status with javascript. The downside is most browsers don't allow this anymore.
To do that, in your page_load add:
btnFind.Attributes.Add("onmouseover","window.status = '';");
btnFind.Attributes.Add("onmouseout","window.status = '';");