Anchors in iframes
| <html> | |
| <head> | |
| <style> | |
| a{ | |
| display: block; | |
| margin: 2em 1em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a name="anchor-1" href="#anchor-1">Anchor #1</a> | |
| <a name="anchor-2" href="#anchor-2">Anchor #2</a> | |
| <a name="anchor-3" href="#anchor-3">Anchor #3</a> | |
| <a name="anchor-4" href="#anchor-4">Anchor #4</a> | |
| <a name="anchor-5" href="#anchor-5">Anchor #5</a> | |
| <script src="http://zeptojs.com/zepto.min.js"></script> | |
| <script> | |
| window.addEventListener('message', function(event) { | |
| if(anchor = event.data['findElement']) { | |
| element = $('[name="' + anchor + '"]') | |
| window.parent.postMessage({"offset": element.offset().top}, "*") | |
| } | |
| }) | |
| $(document).ready(function(){ | |
| window.parent.postMessage("ready", "*") | |
| $('a').click(function(){ | |
| event.preventDefault() | |
| window.parent.postMessage({"setAnchor": $(this).attr('name')}, "*") | |
| }) | |
| }) | |
| </script> | |
| </body> | |
| </html> |
| <html> | |
| <head> | |
| <style> | |
| iframe{ | |
| width: 100%; | |
| border: 1px solid #888; | |
| height: 290px; | |
| margin: 1em 0; | |
| overflow: hidden; | |
| } | |
| </style> | |
| </head | |
| <body> | |
| <iframe src="frame.html"></iframe> | |
| <script src="http://zeptojs.com/zepto.min.js"></script> | |
| <script> | |
| window.addEventListener('message', function(event) { | |
| if(event.data == 'ready') { | |
| sendHash() | |
| } | |
| if(anchor= event.data['setAnchor']) { | |
| window.location.href = '#' + anchor | |
| } | |
| if(offset = event.data['offset']) { | |
| window.scrollTo(0, $('iframe').offset().top + offset) | |
| } | |
| }) | |
| sendHash = function(){ | |
| hash = window.location.hash.substring(1) | |
| $('iframe')[0].contentWindow.postMessage({"findElement": hash}, '*') | |
| } | |
| $(window).on('hashchange', sendHash) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment