I have a sort of index at the bottom of an iframed page with 4 different id iframes. I would like to click a link in the index and jump to the iframes position (#TOP) for example then load a html page in the targeted iframe with just one link. How can I do that with JS or something. I have seen snippets that load 2 iframes but I only want to jump to the anchor location THEN load the html resource inside the targeted iframe. I would think there is a simple JS to do that but cant seem to find one. Still learning here so thanks for the help.
Related
I'm trying to use page anchors on my website, but having issues because content is dynamically loaded from JSON and therefore page anchors are triggering before the content is drawn and fully loaded.
Using Javascript I'd like to move to the page anchor only after all the content on the page has been loaded and drawn. I've found a few solutions on StackOverflow but they all rely on JQuery which I'm trying to avoid. How would you do this in vanilla Javascript?
JQuery examples:
Load anchor tag after page has fully loaded
How to disable anchor jump when loading a page
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 am trying to make a link that will return to a specific link that equals that of a link clicked on a main page.
Such that:
<a href="link.html" onclick="set this link to memory" target=home></a>
<a href="a memory of that other link" target=home></a>
The idea is that pages within an iframe can have links that users can follow while staying on the main page and the ability to return to original page that was inserted on that frame from a central link on the main page.
Thanks for everyone's help. I researched this quite a bit and tried to use javascript and jquery but I am far too novice to make anything work.
Only try this:
<a href="javascript:;" onclick="window.memLink = ['link.html', this];" target=home>Copier Link!</a>
<a href="javascript:;" onclick="this.href=window.memLink[0]; this.onclick();" target=home>Dynamic Link!!</a>
Try this Online!!
So basically I developed a workaround. Instead of using the reload the frame function ,which stops working once you navigate away from the src, I link to another page that contains a frame with the contents being the desired src. This way they can navigate to that page within the frame as far as they want and will always be able to return to the original page by refreshing the parent frame with the link I provided. This should work for now. However, this means that for every page I do this with I will have to create 2 pages to host one desired link within my pages that are to be navigated within iframes. Hopefully there will be some simpler way to do this and hopefully it won't cause problems on mobile platforms when I start designing the pages for that purpose.
I have two iframes (say 1 & 2) in a webpage. In the iframe1, I have a hyperlink on click of which, I want to load another webpage in the iframe2.
Can you please tell me whether loading a page from one iframe to another is possible and if so, please help in doing it. Thanks.
Note: all the web pages that I am considering here are in same domain.
use the name attribute on your iframes
then use target on your links
<iframe name='mydetails' src='someSrc.html'></iframe>
in your other iframe
<a href='details.html target='mydetails'>My details</a>
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)