一个按钮触发多个a标签，只有一个可以下载，其他的window.open()被浏览器拦截

Posted 懒人猫

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个按钮触发多个a标签，只有一个可以下载，其他的window.open()被浏览器拦截相关的知识，希望对你有一定的参考价值。

点击一个标签，触发多个a标签的下载事件，会出现只有一个文件下载，其他都被拦截，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <button id=‘download‘>下载</button>
    <!-- <input type="text" name=‘filePath‘> -->
</body>
<script>
    // window.onload = function(){
        $(function(){
            $("#download").click( function(){//点击下载按钮
        alert(‘下载‘)
            let triggerDelay = 100;
            let removeDelay = 1000;
            let url_arr=[‘http://download.huduntech.com/software/smartpdf/installer/xunjiepdfreader.exe‘,‘http://download.huduntech.com/software/smartpdf/installer/xunjiepdfreader.exe‘,‘http://download.huduntech.com/software/smartpdf/installer/xunjiepdfreader.exe‘,‘http://download.huduntech.com/software/smartpdf/installer/xunjiepdfreader.exe‘];
            //多个file文件选择checkbox
            // $(‘input[name="filePath"]:checked‘).each(function(){
            //     url_arr.push($(this).val());//取到下载url
            // });
            url_arr.forEach(function(item,index){
                _createIFrame(item, index * triggerDelay, removeDelay);
                console.log(‘index‘, index)
            })
            function _createIFrame(url, triggerDelay, removeDelay) {
                //动态添加iframe，设置src，然后删除
                setTimeout(function() {
                    var frame = $(‘<iframe style="display: none;" class="multi-download"></iframe>‘);
                    frame.attr(‘src‘, url);
                    $(document.body).after(frame);
                    setTimeout(function() {
                        frame.remove();
                    }, removeDelay);
                }, triggerDelay);
            }
        })
       
        })
     

    // }
</script>
</html>
react中用原生的js去写
这是基于antd的react
 openDown () {
        const triggerDelay = 100;
        const removeDelay = 1000;
        const {createIFrame}= this
        this.state.selectedRows.forEach((item, index)=>{
            createIFrame(item.fileUrl, index * triggerDelay, removeDelay)
        })

    },
    createIFrame (url, triggerDelay, removeDelay) {
        setTimeout(function (){
            // 动态添加iframe,设置src,然后删除
            const frame = document.createElement(‘iframe‘) //创建a对象
            frame.setAttribute(‘style‘, ‘display: none‘)
            frame.setAttribute(‘src‘, url)
            frame.setAttribute(‘id‘, ‘iframeName‘)
            document.body.appendChild(frame)
            setTimeout(function(){
                const node =  document.getElementById(‘iframeName‘)
                node.parentNode.removeChild(node)
            }, removeDelay)
        }, triggerDelay)
    },

　　

　　

以上是关于一个按钮触发多个a标签，只有一个可以下载，其他的window.open()被浏览器拦截的主要内容，如果未能解决你的问题，请参考以下文章

我可以在破折号情节回调中使用多个输入，但只有一个触发回调吗？

javascript模拟点击a标签

点击<a>标签之后触发后台事件怎么做？或者js控制按钮的点击，怎么做，就是点击<a>之后触发一个按钮的事件

google浏览器的运用方法

layui怎样给表格的最后一列添加一个编辑按钮并且点击后可以触发对应的事件

具有多个动作的 UIButton：如何防止其他动作触发