Multiple <a target=" "> attributes? - html

I have a page with a Google Tour in an iframe. I've set iframe's name as "vtour". The iframe is inside a div whose ID I've set to "tour".
Below the iframe I have some links that jump to certain locations in the Google Tour (within the iframe). This works fine, except that now only the bottom bit of the iframe is on screen since I've scrolled down the page somewhat in order to access the links below it. So I would like these links to jump me higher up on the page by targeting the div's ID so the full iframe is in view.
Is it possible to have a link target both the content inside an iframe and the iframe's location on the page using the div ID? Or, since my iframe is near the top of the page, the target attribute "_top" could also work.

No, the target attribute can only point to one target browsing context at a time. You'll probably need to use a JavaScript click handler to scroll the page programmatically as the link navigates the iframe.

Related

Open links of iframe in a new tab of the parent page

I have a website which contains an iframe to load another website. When a user is clicking a link in the iframe, the navigation is happening inside the iframe which is fine. However, when a user opens a link in a new tab (e.g. with the mouse wheel) the direct link is opened and the parent site is gone. The problem is that I need the new tab to open in the parent otherwise the page will fail over time (the parent page is for example handling authentication). Is there a possibility to achieve this? I have full control over both websites.

Detect focus/blur between two iframes (Accessibility)

Inside of a page, there are 2 iframe buttons (external, not from the same origin as my site) next to each other that grab the focus when a keyboard user focusses to them.
I need to style them (for accessibility reasons) when the user is focussed on them. Since iframes grab the focus, the page has no control over the focus styles inside the iframes so i have made custom borders to go around the iframe when the main window loses focus. [The first iframe has an indicator, yay!]
BUT I realized when you are tabbing BETWEEN the 2 iframes (from the first to the second), the browser cannot detect that action. It is as if it skips form one iframe to the next without notifying the main window of anything. Therefore, I can never style the next iframe and unstyle the first...
I have tried everything even down to using the sandbox attribute to force same origin, which ends up causing issues with these social media iframes (i am warned in the console that they will not pass the iframe to me within a sandbox, once again... rightfully so). Anyone have any ideas?

Redirecting to a part of a page, specifically top of the page

I have this page and i am using an Iframe.
I do my actions in my iframe and it automatically resize, but when the iframe is long (vertically),
and i click on a button that would redirect the page to the next, my parent page is still in the bottom part, and the iframe pgae is at the top.
how would i redirect the parent page to scroll up once location:PAGE.php is triggered, location:PAGE.php is the one inside the iframe.
I hope i asked it properly. i tried a url using #IDofDIV but it only redirects inside of the iframe, i need to redirect outside of the frame. so it goes on top again.
thank you.
Try to add onload="parent.scrollTo(0,0);" on your PAGE.php.

How to hide specific iframe elements from JAWS frames list?

I've got some specific iframe elements that I want to be able to hide from the JAWS frame list (insert + f9). There are other iframes that are very important so just having a user ignore iframes isn't going to work.
Is it possible to do this?
Edit: I should mention why. There is a user option that changes whether specific types of windows open in a new window or open in an iframe on the page, even if the option is set to open in a new window the iframe is still there but the src is set to a blank html file. In that case I(or if it's set to load in the iframe but it isn't at the moment) the content of the iframe is useless to the user and I'd rather hide it from them. I'd rather not make major changes to the code if I can avoid it.
You should be able to hide it with CSS (visibility: hidden or display: none) or with aria-hidden="true".

How to have content pop out of iframe?

Say I have a menu which is initially 200px by 100px. I need to include it in an iframe but the problem is it is a dropdown menu and when it opens the menu gets cut of since it is inside the frame. Is there a way to have it drop out of the frame?
If both the parent page and the page within your iframe are coming from the same domain, you can communicate between them via JS:
Possible Ways to Communicate Between iFrame and Parent Page across domains
The solution would be to, upon hover, send JS to the parent page and have the parent page then render the menu on top of the iframe.
That said, having to use a menu within an iframe that then pops out of the iframe seems to be not a technical problem as much as it is a visual design and layout problem.
No there is not. You will need to use a different approach, such as downloading the content of the frame on the server and inlining it in the parent page instead. Another possibility would be to float the parent page's content over the iframe and make the iframe larger.