I have a mobile web site with of a fixed header (divs) and below an iframe in which a page from a different domain is being displayed.
As I wanted a specific area of the page to be displayed inside the iframe after loading I used a pre exsiting #anchor located in the external page by defining the iframe's src with the intended domain of the page + # and the name of the anchor.
It works perfectly on all desktop browsers (in that the page is displayed inside the iframe with the correct line, where the anchor is, at the top of the iframe window), but for some reason when loading the page in a mobile browser (dolphin/Nexus S browser) it doesn't work and all I get is the page inside the iframe as if no anchor was ever defined.. Just the first line of the page at the top of the iframe window...
Any idea why it happens and how to fix it?
Thanks,
Ran.
Related
I want to click on a link inside iframe onload with the help of JavaScript, I have a site loading inside an iframe, now I want to click a link of a particular div (ID) on page load. The link is inside the iframe.
Actually I'm trying to change the language of the website which is loading in the iframe, the site has gtranslate plugin installed and has different language flag at the footer of the site.
Basically is it possible to force a page to be translated when the page loads?
The Same Origin Policy prevents you from scripting an Iframe from a different domain.
Possible answer here
I have iframe and i have custom javascript for content of iframe. when iframe loaded for first time my custom javascript has no effect but when i right click on iframe and click reload this frame it loading my javascript and working fine.
can any one tell me how can my javascript works at first time.
iframe src is not from same domain.
Parent webpage jumps / autoscrolls to location of iframe when transition happens within an iframe. Transition happens using jquery mobile - $.mobile.changePage($(#pageName)) [ using an anchor to transition to a div ].
I have gone through various links on stackoverflow e.g., Loading iframe with an #element specified moves the parent viewpoint to the same location (hiding iframe till it loads and page changes but it doesn't solve the issue)
There were few other links that mentioned a) About window.parent scrollToTop when iframe loads but I do not want the parent page to scroll at all when page within an iframe changes. b) Changing focus to parent page when iframe loads but it didn't help too. (Note page transitions to another div in an iframe so it seems we need to use anchor tags as per jquery mobile). Is their a way to stop this parent page autoscrolling ? Any help is appreciated.
Issue was jQuery mobile's focusPage, which was autofocusing content within an iframe. To change this behavior - I added below mentioned javascript in of webpage displayed within an iframe
<script type="text/javascript">
if (self != top) { //if inside iframe
//don't use focusPage for embedded site to prevent autoscroll
$.mobile.focusPage = function ( page ) {
return;
}
}
</script>
Note: This link helped in resolving this issue : When within iframe JQuery Mobile autoscrolls to the iframe top
I'm new here ... hope I'm doing everything right ;-D
I've found a few topics with similar problems but they do not look like they want to reach what I want to reach.
I've got a website with a long content area, the website has scrollbars. Somewhere inside this content area is an iframe. This iframe implements a site with full height (a support board) and resizes the iframe when the contents height is changing - so the iframe has no scrollbars. Now what I want is: when I'm opening the website with i.e. http://www.mywebsite.com/#new I want the page to scroll down to the iframe but not only the begining of the iframe but the position where the anchor is placed inside this iframe.
So the iframe itself doesn't need to be scrolled (it's always 100% height) but the parent frame should be scrolled to the position where - inside of the iframe - the anchor is placed.
I really don't know how to solve this. Adding the anchor to the iframes url doesn't help and also just adding the anchor to the website url doesn't work. I'm sure I have to implement something with javascript or similar but don't know how! I'm able to modify the code of both - the website inside the iframe and the parent site!
//EDIT
Oh i forgot... I can't do it with an onClick-Action or a link attribute (that's what seams to be the solution in a related post) because it's not a jump inside the same page. The page is being reloaded and should jump to the anchor :-D So it has to work when I'm entering the URL on my own...
Hope you understand what I need!
//EDIT2
Possible frameworks:
Main page is a wordpress blog, so JQuery is possible!
Iframe page is a simple machine forum (SMF) - I think only native JS here!
Here is an answer that will put you "on the right way".
Assuming your iFrame is always in the same position inside your main page, what you need is to scroll the main page to this point: iframe y coordinate + anchor coordinate inside iFrame.
So I will call you anchor: <a name="anchor1">Here</a> and you iFrame: <iframe id ="myiFrame" ...
To get the iframe position in the page you can use $("#myiFrame").position().top and the anchor position inside the iFrame with $("#myiFrame").contents().find('a[name=anchor]').position().top.
So your script moght look like:
var y = $("#myiFrame").position().top + $("#myiFrame").contents().find('a[name=anchor]').position().top;
$(window).scrollTop(y)
I'm building a firefox extension that has an iframe inside a panel.
I use a xul file as src of the iframe.
When i click on a specific button inside the iframe, i want the iframe to be loaded again with the same src but hide some elements and show another ones. To do this hide/unhide, i have the code on the xul onload, and it works well loading the iframe the first time, or when changing the src.
But when i hide and show the panel with the same src, the onload isn't triggered again.
Should i be doing something before opening the panel the second time?
Hiding and showing the frame doesn't reload it - it really only hides and shows it without touching the content. To reload a frame from outside do:
document.getElementById("my-frame").contentWindow.location.reload();
Or from inside the frame:
window.location.reload();
For reference: location.reload()