【问题标题】:How to make a dynamically changing download link with javascript?如何使用javascript制作动态变化的下载链接?
【发布时间】:2016-07-26 04:48:15
【问题描述】:

我正在制作一个 Flash 画廊网站,我希望页面底部的文字成为 Flash 的下载链接。此文本更改为当前正在显示的当前 Flash 的标题。我希望 href 标记动态更改以匹配正在播放的特定闪存的文件路径,以便用户可以下载它。这是我第一次玩弄下载链接,更不用说那些随变量动态变化的链接了。所以简而言之,我希望链接更改为链接数组中存在的文件路径。

包含我的动态链接起始代码的函数称为 DOWNLOAD

HTML

<body>

    <div id="titleText">
        <h1>Anon Curb</h1>
    </div>
    <div id="flashmovie">
        <object type="application/x-shockwave-flash" data="swfs/welcomeflash.swf">'+
            <param name="movie" value="swfs/welcomeflash.swf">
        </object>
    </div>
    <!-- end #container -->
    <div id="buttonCon">

        <div id="buttons">
            <button id="next">next</button>

            <button id="rand">Random</button>

            <button id="back">Back</button>
        </div>

    </div>

    <div id="titleCon">
        <a href="#" id="downLink">
        <div id="title">Hit random button</div>
        </a>
    </div>
    <!-- end #wrapper -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
    <script src="js/flashcollection.js"></script>
</body>

JAVASCRIPT

$(document).ready(function () {
    var links = [
'swfs/#1%20(Special%20Japanese%20Extended%20Dance%20Mix).swf',
'swfs/$D6.swf',
'swfs/(MAD)%20Huh.swf'
];

 var displaytext = [
'#1 (Special Japanese Extended Dance Mix)',
'$D6',
'(MAD) Huh'
];

var c = 0
    var flashmovie, test, temp;

    function init() {
        flashmovie = document.getElementById('flashmovie');
        document.getElementById('back').onclick = function () {
            if (c == 0) {
                c = links.length;
            }
            c--
            displayFiles();
        }

        document.getElementById('next').onclick = function () {
            if (c == links.length - 1) {
                c = -1;
            }
            c++;
            displayFiles();
        }

        document.getElementById('rand').onclick = function () {
            temp = c;
            while (c == temp) {
                c = Math.floor(Math.random() * links.length);
            }
            displayFiles();
        }
    }

    function displayFiles() {

        test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length);
        document.getElementById('title').innerHTML = displaytext[c];

        flashmovie.innerHTML =
            '<object type="application/x-shockwave-flash" data="' + links[c] + '">' +
            '<param name="movie" value="' + links[c] + '">' +
            '<\/object>';
    }

    function download() {
        document.getElementById('rand', 'back', 'next').onclick = function () {
            document.getElementById('downlink').attr("href", links[c]);
        }
    }

    window.addEventListener ?
        window.addEventListener('load', init, false) :
        window.attachEvent('onload', init);
});

【问题讨论】:

    标签: javascript jquery html flash download


    【解决方案1】:

    正确的javascript

    这使用了 Soltani Neji 的编辑下载功能以及更改下载属性的标签,没有它就无法工作。不知道这对我来说是正常还是特殊

    var c = 0;
        var flashmovie, test, temp;
    
        function init() {
            flashmovie = document.getElementById('flashmovie');
            document.getElementById('back').onclick = function () {
                if (c == 0) {
                    c = links.length;
                }
                c--
                displayFiles();
                download();
            }
    
            document.getElementById('next').onclick = function () {
                if (c == links.length - 1) {
                    c = -1;
                }
                c++;
                displayFiles();
                download();
            }
    
            document.getElementById('rand').onclick = function () {
                temp = c;
                while (c == temp) {
                    c = Math.floor(Math.random() * links.length);
                }
                displayFiles();
                download();
            }
    
        }
    
        function displayFiles() {
    
            test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length);
            document.getElementById('title').innerHTML = displaytext[c];
    
            flashmovie.innerHTML =
                '<object type="application/x-shockwave-flash" data="' + links[c] + '">' +
                '<param name="movie" value="' + links[c] + '">' +
                '<\/object>';
        }
    
        function download() {
            document.getElementById('downLink').setAttribute('href', links[c]);
            document.getElementById('downLink').setAttribute('download', displaytext[c]);
        }
    
        window.addEventListener ?
            window.addEventListener('load', init, false) :
            window.attachEvent('onload', init);
    });
    

    【讨论】:

      【解决方案2】:

      您好,我解决了这个问题,这对我有用 对于 HTML 文件,您只需要添加第一张图片的 href,因为文件总是在启动时加载第一张图片,并且您还需要将属性下载添加到标签,所以这就像

      <div id="titleCon">
      
          <a href="unknittingmouse1.swf" id="downLink" download="">
          <div id="title">Hit random button</div>
          </a>
      </div>
      

      对于javascript,您需要像这样编辑下载功能 然后在每个按钮单击事件中调用它,如下所示:

      $(document).ready(function () {
          var links = [
      'swfs/#1%20(Special%20Japanese%20Extended%20Dance%20Mix).swf',
      'swfs/$D6.swf',
      'swfs/(MAD)%20Huh.swf'
      ];
      
       var displaytext = [
      '#1 (Special Japanese Extended Dance Mix)',
      '$D6',
      '(MAD) Huh'
      ];
      
      var c = 0
          var flashmovie, test, temp;
      
          function init() {
              flashmovie = document.getElementById('flashmovie');
              document.getElementById('back').onclick = function () {
                  if (c == 0) {
                      c = links.length;
                  }
                  c--
                  displayFiles();
                  download();
              }
      
              document.getElementById('next').onclick = function () {
                  if (c == links.length - 1) {
                      c = -1;
                  }
                  c++;
                  displayFiles();
                  download();
              }
      
              document.getElementById('rand').onclick = function () {
                  temp = c;
                  while (c == temp) {
                      c = Math.floor(Math.random() * links.length);
                  }
                  displayFiles();
                  download();
              }
          }
      
          function displayFiles() {
      
              test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length);
              document.getElementById('title').innerHTML = displaytext[c];
      
              flashmovie.innerHTML =
                  '<object type="application/x-shockwave-flash" data="' + links[c] + '">' +
                  '<param name="movie" value="' + links[c] + '">' +
                  '<\/object>';
          }
      
          function download() {
      
                  document.getElementById('downLink').setAttribute('href', links[c]);
              }
      
      
          window.addEventListener ?
              window.addEventListener('load', init, false) :
              window.attachEvent('onload', init);
      });`
      

      希望有帮助:)

      【讨论】:

      • 嘿,抱歉花了这么长时间才做出响应,但是当我暗示我的代码时,它似乎只是制作了标题,除了闪光灯之外的任何按钮都因某种原因消失了,使闪光灯全屏
      • Nvm 我发现我忘了在我的href标签中包含下载属性并且忘记更改它我将在下面发布正确的javascript
      • 添加html标签也一样,你可以用它的名字下载它
      猜你喜欢
      • 1970-01-01
      • 2012-11-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-11-16
      • 2012-01-08
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多