如何使用javascript滾動到iframe中的特定位置

我有一個頁面A.html，嵌入式頁面B.html通過iframe。如何使用javascript滾動到iframe中的特定位置

A.html

<Html> 
    <Head> 
    <Title> A.html </title> 
    </Head> 
    <Body> 
    <Iframe name = "myframe" id = "myframe" src = "B.html" frameborder = "0"/> 
</Body> 
</Html>

B.html

<Html> 
<Head> 
    <Title> B.html </title> 
    <Style type = "text/css" media = "screen"> 
    .body {margin: 0px 0px 0px 0px; font-size: medium;} 
    </Style> 
</Head> 
    <Body class = "body"> 
    <Table width = "100%" height = "100%" align = "left" cellspacing = "0" cellpadding = "0"> 
     . 
     . 
    </Table> 
    <Table width = "100%" height = "100%" align = "left" cellspacing = "0" cellpadding = "0"> 
     The content I want to display! 
    </Table> 
    <Table width = "100%" height = "100%" align = "left" cellspacing = "0" cellpadding = "0"> 
    . 
    . 
    </Table> 
    </Body> 
    </Html>

我想顯示A.html B.html的表2的內容，我找到了一些方法，如

var myIframe = document.getElementById('myframe'); 
    myIframe.onload = function(){ 
     myIframe.contentWindow.scrollTo(100,500); 
    };

但B.html頁面大小未設置，並且有三個表與height =「100％」，B.html顯示爲頁面的百分比，並在瀏覽器中滾動到三頁。 so scrollTo（x，y）方法不起作用，有沒有很好的方法？非常感謝！

來源

2016-12-23 adonm

A.html是我的網頁，B.html是不是我的網頁，它在另一臺服務器 – adonm

的iframe'src'的URL設置爲'B.html /＃table2'很確定可以將其滾動到表2的元素ID或設置任何#ElementId你想滾動？ – NewToJS

謝謝，但實際B.html中沒有表格ID，B.html不是我的頁面，我無法更改它。還有其他的方法嗎？ – adonm

您可以滾動到任何設置了id的HTML元素的位置。

所以，如果有一個表<table id="my-table">，您可以使用錨點鏈接去它。
<a href="#my-table">go to table</a>

iframe中的內容也是如此。
將源代碼設置爲你想要的網址，最後加上#my-table（或類似的東西）。

在下面的代碼片段中，我使用了一個直接指向Stackoverflow.com主頁的#footer的iframe。

.myframe { 
 
    height: 320px; 
 
    width: 480px; 
 
}

<iframe class="myframe" src="http://www.stackoverflow.com#footer"></iframe>

來源

2016-12-23 17:12:02 Michiel

但是使用錨將意味着您必須將錨添加到'B.html'中，就好像您只需設置/更改iframe的src，那麼您就不需要在iframed頁面中添加更多內容。您基本上提供的解決方案不是OP所要求的，然後重複我上面的評論。 – NewToJS

謝謝，但實際B.html中沒有表格ID，而B.html不是我的頁面，我無法更改它。還有其他的方法嗎？ – adonm

如何使用javascript滾動到iframe中的特定位置

回答

相關問題