iframe的使用

liuhm

13212946

发布于
2017-12-27

现在有一个页面，一边有多个a标签跳转，另一边有一个iframe，有什么办法可以做到点击不同a标签使iframe的页面跳转到不同页面？请各位大神支招一下，谢谢了！

css html

阅读 2.2k

2 个回答

xianshenglu

✓ 已被采纳

代码如下,注释是第二种实现方式，两种都可以；

<body>
    <a href="http://www.baidu.com" class="aLink">baidu.com</a>
    <a href="http://www.segmentfault.com" class="aLink">segmentfault.com</a>
    <iframe name="ife" width="800" height="400"></iframe>
    <script>
    window.onload = function() {
        var iframeWin = window.frames[0];
        /*var iframeWin = window.frames[0].frameElement;*/

        document.addEventListener('click', function(event) {
            changeIframeWin(event);
        }, false);

        function changeIframeWin(e) {
            var target = e.target;
            if (target.className === 'aLink') {
                e.preventDefault();
                iframeWin.location = e.target.href;
                /*iframeWin.src = e.target.href;*/
            }
        }

    };
    </script>
</body>