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

Question

为什么这不起作用？我知道我可以使用目标，但我需要使用 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>

Answer 1

您的代码有问题 $('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>

Answer 2

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

标记

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

JS

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

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

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

Target iframe with links using jquery not working

iframe

jquery

hyperlink

target