Question

我在iframe中有一张桌子。我想通过单击iframe外部的元素跳转到该表中的特定行。我试图使用hash转到具有指定名称的锚点。它似乎只能使用<a>元素，但不能使用<tr>。请看下面的代码：

<script type="text/javascript">
$(document).ready(function(){
    $("#jump").click(function(){
        top.myiframe.location.hash = "3";
        //top.myiframe.location.hash = "5"; //this works for <a>
    });
});
</script>

<p id="jump">Jump</p>    
<iframe id="myiframe" src="[my iframe url]" scrolling="no"></iframe>

myiframe.html包括：

<table>
    <tr name="1"><td>1</td></tr>
    <tr name="2"><td>2</td></tr>
    <tr name="3"><td>3</td></tr>
    <tr name="4"><td>4</td></tr>
</table>
<a name="5">5</a>

您可以想象，我可以跳转到<a name="5">5</a>，但不能跳转到任何<tr>元素。有什么建议吗？

Answer 1

使用scrollIntoView

$(document).ready(function(){
    $("#jump").click(function(){
        var row = $("#myiframe").contents().find("tr[name=3]"); // Shankar's code
        row.scrollIntoView();
    });
});

更新：首先让上面的脚本找到一个行对象

没有jQuery它可以正常工作

document.getElementsByName（ “ROW3”）[0] .scrollIntoView（）;

http://jsfiddle.net/mplungjan/HWB6t/

Answer 2

您不能将哈希值用于tr元素。它仅适用于锚标签。无论如何从iframe中选择任何元素，您都必须使用以下选择器。

例如，选择iframe（myiframe）中的tr元素

$("#myiframe").contents().find("tr[name=3]");

//滚动到iframe中所需元素的代码

$(document).ready(function(){
    $("#jump").click(function(){
        var iframe = $("#myiframe");
        var tr = iframe.contents().find("tr[name=3]");
        $(iframe.contentWindow || iframe.contentDocument).scrollTop(tr.offset().top);
    });
});

Answer 3

尝试使用id属性，而不是name元素的<tr>属性。

<table>
    <tr id="1"><td>1</td></tr>
    <tr id="2"><td>2</td></tr>
    <tr id="3"><td>3</td></tr>
    <tr id="4"><td>4</td></tr>
</table>
<a id="5">5</a>

Hash Tag Links That Don’t Headbutt The Browser Window

jQuery：如何跳转到iframe内的表中的特定行

3 个答案: