javascript - 避免服务器调用 HTML 对象样式显示属性更改

Question

应该怎么做才能避免对 pdf 的服务器请求？我试过visibility=hidden和width=0.

<object class='pdfClass' data='"+conventionId+"/showPdf.html' width='100%' height='600'></object>

function toggleConv() {
    if (...) {
        document.getElementById(conventionId).style.display = 'none';
    } else {
        document.getElementById(conventionId).style.display = ''; //causes a refresh
    }
}

Answer 1

如果它在 HTML 中，它将加载。据我所知，阻止请求的唯一真正方法是在代码中动态添加对象的 url（甚至添加对象本身）：

if (...) {
    // Add the data tag here
}

Answer 2

编辑：

经过测试，我发现以下内容在 Firefox 13 中无需重新加载即可工作：

<object id="test" class='pdfClass' data='https://web3.unt.edu/riskman/PDF/Guidelines_on_Staphylococcal_Infections-Athletics__Revised__06-22-06.pdf' width='100%' height='600'></object>

function toggleConv(o){
    var test = document.getElementById('test');

    if (o == true){
        test.style.width = 0;
        test.style.height = 0;
    } else {
        test.style.width = '100%';
        test.style.height = '600px';
    }
}

http://jsfiddle.net/userdude/KnEYC/2/

---

原始回复。请注意，元素的heightandwidth也需要切换到很少或没有，以防止它继续占用相同的空间。

一种技术是通过将其放置在屏幕外来隐藏它：

#test {
    position: relative;
}

function toggleConv(o){
    if (o == true){
        document.getElementById('test').style.left = '-10000px';
        document.getElementById('test').style.top = '-10000px';
    } else {
        document.getElementById('test').style.left = '';
        document.getElementById('test').style.top = '';
    }
}

http://jsfiddle.net/userdude/KnEYC/