2017-06-25 54 views
1

我有一个网站,我的所有内容页面在iframe中打开。加载我所有的页面顶部

我遇到的一个问题是,当访问者在我的网站上打开第二页时,它会以与上一页相同的“滚动位置”打开。

我希望我的所有页面都能在顶部打开。

注:我花了几天和几个小时在本网站和其他网站上搜索,试图找到有效的东西。迄今为止,我找到的解决方案都没有奏效。

所以...我决定发布我的问题和一个非常简洁的3页的例子,看看我能得到一些这方面的急需帮助。

任何帮助或建议表示感谢。

这里是 '索引'(父)页面:

<!DOCTYPE html> 
    <html> 
    <head> 

    <style> 
    body{margin:0;} 
    .header{width:100%; height:60px; background-color:blue;} 
    .header a{vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;} 
    #myiframe{width:100%; height:2000px;} 
    .footer{width:100%; height:60px; background-color:blue; margin-bottom:20px;} 
    .footer a{vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;} 
    </style> 

    </head> 
    <body> 

    <div class="header"><a>This is the Header of the index (parent) page.</a></div> 

    <iframe id="myiframe" name="myiframe" src="1stPage.html"></iframe> 

    <div class="footer"><a>Footer</a></div> 

    </body> 
    </html> 

这里是第一个 '内容' 页面(包括最后失败的滚动码):

<!DOCTYPE html> 
    <html> 
    <head> 

    <style> 
    body{margin:0;} 
    .text{font-family:Arial; font-size:12pt;} 
    .link{margin-top:1900px;} 
    </style> 

    <script> 
    $(document).ready(function(){ 
    $('html, body').scrollTop(0); 
    $(window).on('load', function() { 
    setTimeout(function(){ $('html, body').scrollTop(0);}, 0); 
    }); 
    }); 
    </script> 

    </head> 
    <body> 

    <div class="text">This is the 1st page in iframe (..and this is 'page postition' "Top" or "0").</div> 
    <div class="text">Please scroll down to the link to 2nd page.</div> 

    <div class="link"><a class="text" href="2ndPage.html" target="myiframe">Click here to go to 2nd Page</a></div><br> 
    <div class="text">This is the 1st page in iframe (..and this is 'page postition' "Bottom" or "X").</div> 

    </body> 
    </html> 

最后..第二个“内容”页面(也包括最后一个失败的滚动代码):

<!DOCTYPE html> 
    <html> 
    <head> 

    <style> 
    body{margin:0;} 
    .text{font-family:Arial; font-size:12pt;} 
    .link{margin-top:1900px;} 
    </style> 

    <script> 
    $(document).ready(function(){ 
    $('html, body').scrollTop(0); 
    $(window).on('load', function() { 
    setTimeout(function(){ $('html, body').scrollTop(0);}, 0); 
    }); 
    }); 
    </script> 

    </head> 
    <body> 

    <div class="text">This is the 2nd page in iframe (..and this is 'page postition' "Top" or "0").</div> 
    <div class="text">Please scroll down to the link to 2nd page.</div> 

    <div class="link"><a class="text" href="1stPage.html" target="myiframe">Click here to go back to the 1st Page</a></div><br> 
    <div class="text">This is the 2nd page in iframe (..and this is 'page postition' "Bottom" or "X").</div> 

    </body> 
    </html> 

回答

2

您可以在iFrame中执行此操作onload event,as this:

<iframe id="myiframe" name="myiframe" src="1stPage.html" onload="scroll(0,0);"></iframe> 
+0

谢谢!这就像一个魅力!现在,我只需要弄清楚如何在我与其他网站上的网页分享链接时使用其父网页打开网页。 –