javascript - 使用 javascript/jquery 加载文件

Question

这是我正在使用的功能：

jOWL.load("owldoc.owl", function(){});

jOWL.load 将 owl 文档作为参数（如上所示）。我在服务器上有 3 个这样的文档，并且希望用户能够通过按下按钮来选择要加载的文档。

我想知道是否可以将字符串“owldoc.owl”、“owldoc2.owl”或“owldoc3.owl”传递给javascript变量，然后可以将其作为参数传递给jOWL.load

我该怎么办？

Answer 1

onclick='loadFile("1"); return false;'使用相应链接内部调用以下函数。

IE：

    <a href="" id='load1'>Load 1</a>
    <a href="" id='load2'>Load 2</a>
    <a href="" id='load3'>Load 3</a>

功能：

    function loadFile(param){
        jOWL.load("owldoc"+param+".owl", function(){});
    }

要让 onclicks 不在线显示，最简单的方法是将 id 添加到锚点并在页面加载时调用此函数manageOnclicks();：

    function manageOnclicks(){
        document.getElementById('load1').onclick = function(){loadFile('1'); return false;}
        document.getElementById('load2').onclick = function(){loadFile('2'); return false;}
        document.getElementById('load3').onclick = function(){loadFile('3'); return false;}
    }

Answer 2

示例 HTML

<input type='button' onclick="loadFile('owldoc.owl')" value='Load Owldoc'/>
<input type='button' onclick="loadFile('owldoc2.owl')" value='Load Owldoc2'/>
<input type='button' onclick="loadFile('owldoc3.owl')" value='Load Owldoc3'/>

Javascript

function loadFile(fileName) {
    // filename contains the variable
    // you can now do        
    //jOWL.load(filename, function(){}

}

Answer 3

就像是：

HTML：

<h3>Choose a file to load</h3>
<ul id='choose_file'>
    <li><a data-file='1'>File 1</a></li>
    <li><a data-file='2'>File 2</a></li>
    <li><a data-file='3'>File 3</a></li>
</ul>

JS

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#choose_file').addEventListener('click', function(evt) {
        var file_to_load = evt.target.getAttribute('data-file');
        jOWL.load('owldoc'+file_to_load+'.owl', function() {
            /* callback code here */
        });
    }, false);
}, false);