将 iframe 代码转换为 jquery 代码
Posted
技术标签:
【中文标题】将 iframe 代码转换为 jquery 代码【英文标题】：Converting iframe code to jquery code 【发布时间】：2017-09-23 00:59:11 【问题描述】：我使用 iframe 每 5 秒加载一次 iframe 中的内容。它工作正常。发生的情况是，每次加载时它都会一直闪烁，这有点烦人。
我想将 iframe 代码转换为滚动 div，以便 iframe src 内容每 5 秒加载一次，并且闪烁应该消失。
这是我的代码：
我的主页 (INDEX.html) 有：
<iframe src="messages.php#bottom" 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 - 但我不知道该怎么做
【问题讨论】：
【参考方案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 = '­<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" frameborder="0" name="main" allowtransparency="yes" scrolling="auto"></iframe>
</div>
【讨论】：
我需要在哪里定义它，在messages.php内部或index.html文件外部 顺便说一句，问题是：即使我使这个脚本有效，闪烁会消失吗，我认为不会，我担心闪烁应该消失 @Initiatormeta 标签必须放在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>【讨论】：
以上是关于将 iframe 代码转换为 jquery 代码的主要内容，如果未能解决你的问题，请参考以下文章
结合两个代码片段？将用户输入的 Youtube url 转换为嵌入 url，然后将 iframe src 替换为转换后的 url
如何使用 jQuery 将 JavaScript 代码添加到现有的 iFrame 中？
如何使用jquery将javascript代码注入iframe头部