Question

我最近发布了一个问题并建议将其作为答案，但它无效。为什么？

<div class="text-center">           
    <embed src="https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf" width="300" height="300" type='application/pdf' id="thePdf">
</div>

<div class="button">
    <button class="btn-info" type="button" onclick="switchPdf();">Search</button>
</div>

<script>
function switchPdf() {
    var fileA = 'https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf',
        fileB = 'https://www.setasign.com/files/demo-files/pdfs/tektown/Fact-Sheet.pdf',
        elem = document.getElementById('thePdf');

    elem.src = elem.src == fileA ? fileB : fileA;
}
</script>

基本上有一个默认的PDF在页面打开时加载，一旦我点击按钮，我希望pdf更改为另一个pdf。但它不起作用

Answer 1

对src，<embed>等<object>属性进行了更改不要生效

必须替换为新元素

＆＃13;

function switchPdf() {
    var fileA = 'https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf',
        fileB = 'https://www.setasign.com/files/demo-files/pdfs/tektown/Fact-Sheet.pdf',
        container = document.getElementById('thePdfContainer'),
        elem = document.getElementById('thePdf');

    var newFile = (elem.src === fileA) ? fileB : fileA;
  
    container.innerHTML = '<embed src="' + newFile + '" width="300" height="300" type="application/pdf" id="thePdf">';

    console.log(container.innerHTML);
}

＆＃13;

<div id="thePdfContainer" class="text-center">           
    <embed src="https://www.setasign.com/files/demo-files/pdfs/lenstown/Fact-Sheet.pdf" width="300" height="300" type='application/pdf' id="thePdf">
</div>

<div class="button">
    <button class="btn-info" type="button" onclick="switchPdf();">Search</button>
</div>

＆＃13;

JavaScript函数切换功能不起作用

1 个答案: