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

时间:2015-05-13 10:24:36

标签: javascript jquery html

加载我的页面后,我运行一个脚本,在其中我动态地将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>

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

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

3 个答案:

答案 0 :(得分:0)

而不是整个黑客,请尝试使用oneliner:

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

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

答案 1 :(得分:0)

问题在于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>

答案 2 :(得分:-1)

解决了:我添加了一个计时器并强制在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毫秒,它的行为就像我上面提到的那样。

谢谢大家!