自动刷新 IFrame HTML [英] Auto Refresh IFrame HTML

查看：28 发布时间：2021/12/21 23:07:58 html iframe automation refresh element

本文介绍了自动刷新 IFrame HTML的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何每 3 秒自动刷新一次 Iframe，而不刷新整个页面.我使用 <meta http-equiv="refresh" content="1"> 但它显示整个页面刷新，并在每次刷新时将您置于页面顶部.我的 iframe 指向一个文本文件以读取我放入的实时消息.有没有办法做到这一点而不刷新整个页面，只是元素.我是一个 HTML 初学者，所以请彻底解释一下.我谷歌了很多，尝试了很多东西，到目前为止没有任何效果，我在许多浏览器中尝试过.

到目前为止我的代码:

<头><link rel="shortcut icon" href="favicon.png" type="image/x-icon"/><title>聊天</title><风格>身体{边距:0px；}h1{字体系列:arial；字体大小:100%；}iframe{宽度:900px；高度:500px；}div.top{背景颜色:rgba(2, 109, 8, 0.83);高度:30px；宽度:100%；}</风格><身体><div class="top"><img src="favicon.png" alt="favicon" height="31" width="31" ><h1>聊天</h1>

<iframe src="text.txt" name="iframe_a">/>

解决方案

您的 html 标签有问题.(iframe"标签格式错误)

在这里，您已修复代码并准备好运行答案:

<头><link rel="shortcut icon" href="favicon.png" type="image/x-icon"/><title>聊天</title><风格>身体 {边距:0px；}h1{字体系列:arial；字体大小:100%；}iframe {宽度:900px；高度:500px；}div.top {背景颜色:rgba(2, 109, 8, 0.83);高度:30px；宽度:100%；}</风格><身体><div class="top"><img src="favicon.png" alt="favicon" height="31" width="31"><h1>聊天</h1>

<iframe id="iframe" src="text.txt"></iframe><脚本>window.setInterval(function() {重新加载IFrame()}, 3000);函数重新加载IFrame(){console.log('重新加载..');document.getElementById('iframe').contentWindow.location.reload();}

问候

How do I auto Refresh a Iframe every 3 Seconds with out it refreshing the entire page. I use <meta http-equiv="refresh" content="1"> but it shows the entire page refresh and puts you to the top of the page each time it does. My Iframe is pointed at a text file to read live messages I put in. Is there even a way to do this with out it refreshing the entire page, just the element. I am a HTML beginner so explain thoroughly please. I google alot and tried many things and so far nothing works and I try in many browser.

My code So Far:

<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />



<title>Chat</title>

<style>

body{
margin: 0px;
}

h1{
font-family: arial;
font-size: 100%;
}
iframe{
width: 900px;
height: 500px;
}

div.top{
background-color: rgba(2, 109, 8, 0.83);
height: 30px;
width: 100%;
}
</style>


</head>

<body>
<div class="top">
<img src="favicon.png" alt="favicon"  height="31" width="31" >
<h1>Chat</h1>
</div>




<iframe src="text.txt" name="iframe_a"> />



</body>
</html>

解决方案

You have problems with your html tags. (the "iframe" tag is malformed)

Here you have your code fixed and your answer ready to run:

<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
    <title>Chat</title>
    <style>
        body {
            margin: 0px;
        }
        h1 {
            font-family: arial;
            font-size: 100%;
        }
        iframe {
            width: 900px;
            height: 500px;
        }
        div.top {
            background-color: rgba(2, 109, 8, 0.83);
            height: 30px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="top">
        <img src="favicon.png" alt="favicon" height="31" width="31">
        <h1>Chat</h1>
    </div>

    <iframe id="iframe" src="text.txt"></iframe>

    <script>
        window.setInterval(function() {
            reloadIFrame()
        }, 3000);

        function reloadIFrame() {
            console.log('reloading..');
            document.getElementById('iframe').contentWindow.location.reload();
        }
    </script>
</body>
</html>

Regards

这篇关于自动刷新 IFrame HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

自动刷新 IFrame HTML [英] Auto Refresh IFrame HTML

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

自动刷新 IFrame HTML [英] Auto Refresh IFrame HTML

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭