Question

我使用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 - 但无法绕过如何做到这一点

Answer 1

您可以在messages.php中放置元刷新标记

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

或者你可以使用Javascript和setInterval来刷新Source的源代码...

<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 = '<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>

Answer 2

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

<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）。因此{AJ}请求完成后，.done()可用于触发回调。

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

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

setInterval(requestMessage, 5000);

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

＆＃13;

//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);
                
                
        });
}

＆＃13;

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

＆＃13;

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

＆＃13;

将iframe代码转换为jquery代码

2 个答案: