window.open The new browser window
Windows created by <iframe/>
Pseudo pop-up windows created by the page DOM: such as pop-up tips
First, when the page without JS
Generally speaking, no JS situation that is based on the behavior of HTML to do things. So that links can be linked, it has been resolved. Relatively simple, we have simply brought:
1. window.open new browser window: Try to get JS triggers bound on <a/> and link A to a new page.
The link is the same as the window.open target
The code is as follows |
Copy Code |
<a href= "/target.html" target= "_blank" >[open window]</a> |
Remember to block the default behavior of the link, or JS will open two times
The code is as follows |
Copy Code |
window.open ('./iframe.html ', ' name ', ' height=300,width=500 '); return false;
|
2. <iframe/> Created window: If it is created dynamically with JS, then remember the trigger should also be like window.open method, write the solution link on a <a/>, let the user through the link to access. And if it is hidden, then try to use <noscript/> to hide, and then use JS to make it normal display, or a height of 0 empty iframe. This will ensure that when there is JS available, and in the absence of JS can be normal display. Detailed application can refer to: Alipay new home of a few front-end practice.
Create dynamically, use this method as much as possible, because IE8 cannot use JS focus to dynamically created focusable elements
and empty src use javascript: ' This way, because this is the best way to solve performance, see: Empty Path to page performance impact solution
The code is as follows |
Copy Code |
<a href= "/target.html" target= "_blank" >[open iframe]</a> <iframe src= "javascript:" "frameborder=0 id=" Theframe "></iframe> Js document.getElementById (' theframe '). src = '/target.html ' |
3. The pseudo pop-up window created by the page DOM: Hidden using <noscript/>. Link with anchor point.
The code is as follows |
Copy Code |
<a href= "#target" >[open current page dom]</a>
|
... A lot of things are separated in the middle ...
The code is as follows |
Copy Code |
<noscript><div id= "Target" >content</div></noscript>
|
Second, most of the cases
Large number of cases, the user's browser is open JS. And we have to do is: focus to the pop-up window, and the first tab will be able to access the contents of the. Sounds pretty simple, hub? First look at the DEMO:
Previewing: Access to pop-up menus/windows
1. window.open new browser window: Focus to a new window.
The code is as follows |
Copy Code |
Referenced from: quickmode-popups function Popitup (URL) { Newwindow=window.open (URL, ' name ', ' height=200,width=150 '); if (Window.focus) { Focus to new Window Newwindow.focus (); } To block the default behavior of triggers return false; }
|
2. <iframe/> Created window: Debugging for a long time, IE8/9 need such as IFRAME after the success settimeout to Hack;firefox can not use Ifrcontentwindow.focus (), can only use if Rame.focus (). Combined, this code is needed:
The code is as follows |
Copy Code |
For all except Firefox settimeout (function () { F.contentwindow.focus (); }, 50); Hack for Firefox Navigator.userAgent.toLowerCase (). IndexOf (' Firefox ')!==-1 && f.focus (); |
3. Pseudo-pop-up windows created by the page DOM: for DOM, these focusable elements (the <a/> <input/>) are not focus-only. So what can we do when we need to focus to a div? In general, we can set Tabindex to allow non focusable elements such as <div/> to trigger the focus event. But we want to really focus to a place, so that we can use the tab to access the content of the area, so this method is useless for us.
There is no better method (for what I can think of and find), so for now, we can only use a focusable element to create the focus target. We can do this:
<a href= "#" class= "GetFocus" >get focus</a>
<input title= "Testing"/>
But the problem is that the link has no effect on us, we need to hide him and focus. But Display:none is not the focus of the time. For hidden, there is not much to say. Recommend a look at this article: use Clip to hide content. So we can do this to hack our link:
The code is as follows |
Copy Code |
HTML: Note Use Hidefocus to remove dotted boxes <a href= "#" class= "GetFocus" Hidefocus>get focus</a> CSS: Using clip . getfocus{ position:relative; Clip:rect (1px 1px 1px 1px); Clip:rect (1px, 1px, 1px, 1px); } |
JavaScript: Remember to put <a/> at the front of this DOM structure for easy access from top to bottom tab
A.focus ()
Third, Summary:
So far, important technical implementation points have also been made clear. Code see this rude DEMO, although there is no special optimization of a piece of code, but I believe that can solve a lot of problems. For accessibility, we have a lot of ways to go. Come a little bit, starting today.