Question

加载我的页面后，我运行一个脚本，在其中我动态地将click事件添加到我的隐藏按钮，然后触发点击。这样我每次重新加载页面时都会强制重新加载javascript库。然后该库发出请求，并以适当的方式显示响应。第一次加载页面时，会显示响应（选中的文本会突出显示）。每次下载时，都会重新加载库，但不会显示响应。我希望每次重新加载页面时都显示它。

我试图禁用缓存，使用shift + f5刷新它，但仍然没有成功。

这是我的代码：

<body>
    <div id="content">
        <div id="pdfContainer" class = "pdf-content">
        </div>
    </div>      
    <input id="btn" type="button" hidden="true" />

    <script>
        function loadAnnotator() {

            var content = $('#content').annotator();
            console.log("Annotator loaded");

        };
        $(window).load(function () {

            var btn = $("#btn");             
            if(btn !== null && btn !== undefined) {

                btn.on('click', loadAnnotator);                    
                btn.click();
            }
        });
    </script>
</body>

我可以使它显示并手动点击此按钮，但这不是所需的行为。

我怎样才能让它以我想要的方式运作？提前谢谢。

Answer 1

而不是整个黑客，请尝试使用oneliner：

$($('#content').annotator));

不需要隐藏按钮。如果这不起作用，那么在此脚本之后，“注释器”才有可能被初始化。

Answer 2

问题在于btn.click();这在某些浏览器中不起作用！

像这样btn[0].click();进行抢救的JavaScript，或者您需要更改逻辑如下

  <body>
<div id="content">
    <div id="pdfContainer" class = "pdf-content">
    </div>
</div>      
<input id="btn" type="button" hidden="true" />

<script>

        var content =null;
    function loadAnnotator() { 
      if(content==null)content =$('#content').annotator();
        console.log("Annotator loaded");
    };
      function clickedButton(){
            loadAnnotator();
       }
    $(window).onLoad(function () {
        var btn = $("#btn");             
        if(btn !== null && btn !== undefined) {
            btn.on('click', clickedButton);     
            clickedButton();                   
        }
    });
</script>
</body>

Answer 3

解决了：我添加了一个计时器并强制在300毫秒后点击该按钮。

不知怎的这样：

   <body>
    <div id="content">
        <div id="pdfContainer" class = "pdf-content">
        </div>
    </div>      
    <input id="btn" type="button" hidden="true" onclick="loadAnnotator()" />

    <script>

        var content = null;
        function loadAnnotator() {
            if (content === null) {
                content = $('#content').annotator();
            }
            console.log("Annotator loaded");
        }
        ;
        function clickedButton() {
            var btn = $("#btn")[0];
            if (btn !== null && btn !== undefined) {
                btn.click();
                console.log("Button is clicked");
            }
        }
        $(window).load(function () {
            setTimeout(clickedButton, 300);
        });

    </script>
</body>

另外，我已经听取了建议

var btn = $("#btn")[0];

有时，人们会忘记关于jQuery的基本事情:) 如果我增加时间少于300毫秒，它的行为就像我上面提到的那样。

谢谢大家！

页面重新加载时不显示动态内容

3 个答案: