使用 jquery 链接的目标 iframe 不起作用答案

【问题标题】：Target iframe with links using jquery not working使用 jquery 链接的目标 iframe 不起作用
【发布时间】：2015-10-02 03:58:09
【问题描述】：

为什么这不起作用？我知道我可以使用 target，但我需要使用 jquery。

<html>
    <head>
        <script src="http://code.jquery.com/jquery.min.js"></script>
    </head>
    <body>
        <a href="test1.html" onclick="test()">Test 1</a> <br>
        <a href="test2.html" onclick="test()">Test 2</a>
        <p><iframe id="viewer" src="" frameborder="1" style="width:400px; height:600px"></iframe>
        <script>
            function test() {
                var goto = $('this').attr('href');
                $('#viewer').attr('src', goto);
            }
        </script>
    </body>
</html>

【问题讨论】：

控制台说什么？你试过调试吗？

标签： jquery iframe hyperlink target

【解决方案1】：

为了实现这一点，您需要进行一些更改。

标记

<a href="test1.html">Test 1</a>
<a href="test2.html">Test 2</a>

$(document).ready(function(){
    $(a).click(function(event){
         event.preventDefault();
         var goto = $('this').attr('href');
         $('#viewer').attr('src', goto);
    });
});

问题是当你点击anchor时，当前窗口的href会变成anchor标签的href属性中指定的相应href。所以你需要防止默认处理。因此，在函数中添加了 event.preventDefault() 来实现。

【讨论】：

【解决方案2】：

您的代码的问题是 $('this') 正在寻找不退出的 HTML 元素。

对于直接问题，使用test(this)传递元素

<a href="test1.html" onclick="test(this)">Test 1</a>

脚本

function test(elem) {
    $('#viewer').attr('src', elem.href);
}

当您使用 jquery 绑定事件时使用它

//Document ready handler which executes when DOM is complety loaded
$(function(){

    //Bind event
    $('a').on('click', function(e){

        //Cancel default action
        e.preventDefault();

        //Here this refers to element which invoked the event handler
        var goto = $(this).attr('href'); //this.href can also be used

        $('#viewer').attr('src', goto);
    }); 
});

HTML

<a href="test1.html">Test 1</a>
<a href="test2.html">Test 2</a>

【讨论】：