将 iframe 代码转换为 jquery 代码答案

【问题标题】：Converting iframe code to jquery code将 iframe 代码转换为 jquery 代码
【发布时间】：2017-09-23 00:59:11
【问题描述】：

我使用 iframe 每 5 秒加载一次 iframe 中的内容。它工作正常。发生的情况是，每次加载时它都会一直闪烁，这有点烦人。

我想将 iframe 代码转换为滚动 div，以便 iframe src 内容每 5 秒加载一次，并且闪烁应该消失。

这是我的代码：

我的主页 (INDEX.HTML) 有：

<iframe src="messages.php#bottom" width="674" height="476" frameborder="0" name="main" allowtransparency="yes" scrolling="auto"/></iframe>

Messages.php的内容是这样的

<html>
<head>
<script>
    window.onload = function() { setTimeout("window.location.href='messages.php';", 5000) }; // 5000 = 2 seconds (it's in milliseconds)
    </script>
</head>
<body>
<?php Application.logs ?>
</body>
</html>

我正在尝试使用这个文件：

https://gist.github.com/aklump/5470863 - 但我不知道该怎么做

【问题讨论】：

标签： javascript php jquery html iframe

【解决方案1】：

你可以在messages.php中放置一个元刷新标签

<meta http-equiv="refresh" content="5">

或者您可以使用带有 setInterval 的 Javascript 来刷新 Source 的 src...

<script>
window.setInterval("reloadIFrame();", 5000);

function reloadIFrame() {
 document.frames["frameNameHere"].location.reload();
}
</script>

编辑：

尝试将其添加到index.html：

<script>
    // Prevent variables from being global      
    (function () {

      /*
          1. Inject CSS which makes iframe invisible
      */

    var div = document.createElement('div'),
        ref = document.getElementsByTagName('base')[0] || 
              document.getElementsByTagName('script')[0];

    div.innerHTML = '&shy;<style> iframe { visibility: hidden; } </style>';

    ref.parentNode.insertBefore(div, ref);


    /*
        2. When window loads, remove that CSS, 
           making iframe visible again
    */

    window.onload = function() {
        div.parentNode.removeChild(div);
    }

})();
</script>

编辑 2

好的，删除您之前从此处复制的所有代码，然后试试这个：

<script>
$(function() {
    startRefresh();
});

function startRefresh() {
    setTimeout(startRefresh,5000);
    $.get('messages.php#bottom', function(data) {
        $('#content_div_id').html(data);    
    });
}
</script>

然后用这个替换你的 iFrame：

<div id="content_div_id">
<iframe src="messages.php#bottom" width="674" height="476" frameborder="0" name="main" allowtransparency="yes" scrolling="auto"></iframe>
</div>

【讨论】：

我需要在哪里定义它，在messages.php内部或index.html文件外部
顺便说一句，问题是：即使我使这个脚本有效，闪烁会消失吗，我认为不会，我担心闪烁应该消失
@Initiator meta 标签必须放在messages.php 的head 部分，script 基本上可以放在index.html 中的任何位置。试用代码，让我知道它是否有效。
好的，我试过了，它的行为与 iframe 相同，每 5 秒闪烁一次，它确实有效，但闪烁仍然存在
您尝试了messages.php 的head 部分中的meta 标记和index.html 中的script？

【解决方案2】：

不要使用 iframe，而是使用 <div> 元素。例如：

<div id="messageContainer"></div>

然后使用 jQuery 的 $.get() 触发 AJAX 请求，尽管可以说不需要 jQuery（vanilla Javscript 可以与 XMLHttpRequest 一起使用 - 阅读 this site有关消除 jQuery 的更多信息）。

当对 messages.php 的请求完成后，使用响应更新容器的 innerHTML（即使用.html()）。由于 jquery AJAX 请求（例如通过 $.get()、$.post() 等调用）返回一个 jqXHR 对象，该对象实现了 Promise 接口（有关更多信息，请参阅deferred）。所以.done()可以用来在AJAX请求完成时触发回调。

 $.get('messages.php')
    .done(function(response) {
            messageContainer = $('#messageContainer');
            messageContainer.html(response);
    });

将该 AJAX 调用放入一个函数中，并使用setInterval() 每 5 秒调用一次函数。

setInterval(requestMessage, 5000);

此外，下面的代码使用 jQuery 的 scrollTop() 方法将容器滚动到底部。

//ensure DOM has loaded before interacting with it
$(document).ready(function() {
   setInterval(requestMessage, 5000); 
   console.log('interval set - every 5 seconds');    
});
function requestMessage() {
    $.get('http://samonela.scienceontheweb.net/PHP/messages2.php')
        .done(function(response) {
                messageContainer = $('#messageContainer');
                messageContainer.html(response);
                //scroll container to the bottom
                messageContainer.scrollTop(messageContainer[0].scrollHeight);
                
                
        });
}

#messageContainer {
        height: 100px;
        overflow-y: auto;
        border: 2px solid #0f0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="messageContainer">
</div>

【讨论】：