页面描点跳转如何跳转到iframe里面的元素上？

描点获取iframe

解决方案 »

  1.   

    下面这个例子应该能满足你的需求了。
    简单的说就是改变iframe的src，把锚点加在src后面。
    可能还要加上在父窗口定位到这个iframe位置的代码，自己看着加吧。父页面：<!DOCTYPE html>
    <html manifest="demo.appcache">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>父窗口</title>
        </head>
        <body>
            <a href="#m1">去锚点1</a>
            <a href="#m2">去锚点2</a>
            <a href="#m3">去锚点3</a>
            <a href="#m4">去锚点4</a>
            <a href="#m5">去锚点51</a>
            <iframe name="child" id="child" src="bbb.html" style="height:200px;"></iframe>
            <script type="text/javascript">
                window.onload = function(e){
                    e = e || window.event;
                    var a = document.getElementsByTagName('a');
                    var iframe = document.getElementById('child');
                    for(var i=0;i<a.length;i++){
                        a[i].onclick = function(){
                            var href = this.getAttribute('href');
                            iframe.src = 'bbb.html'+href;
                        }
                    }
                    if(e.preventDefault){
                        e.preventDefault();
                        e.stopPropagation();
                    }else{
                        e.cancelBubble = true;
                        e.returnValue = false;
                    }
                }
            </script>
        </body>
    </html>
        
    子页面：<!DOCTYPE html>
    <html manifest="demo.appcache">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>子窗口</title>
        </head>
        <body>
            <div style="height:400px">
                <a href="javascript:;" id="m1">锚点1</a>
            </div>
            <div style="height:400px">
                <a href="javascript:;" id="m2">锚点2</a>
            </div>
            <div style="height:400px">
                <a href="javascript:;" id="m3">锚点3</a>
            </div>
            <div style="height:400px">
                <a href="javascript:;" id="m4">锚点4</a>
            </div>
            <div style="height:400px">
                <a href="javascript:;" id="m5">锚点5</a>
            </div>
        </body>
    </html>