javascript – 使用innerHTML属性显示另一个html文件的内容？

我试图将我的一个元素的innerHTML设置为另一个只显示纯文本的html文件的内容.这可能吗？我正在考虑它的方式如下,但显然它只是直接将文本设置为该引用而不是显示文件的内容.

document.getElementById("myElement").innerHTML = "directory/file.html"

最佳答案

您可以使用iframe标记：

</pre>
<p>您只需更改其src<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>即可轻松更改iframe的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>(它将<a href="https://www.jb51.cc/tag/zidong/" target="_blank" class="keywords">自动</a>更新)：</p>
<p></p>
<pre><code>document.getElementById('myHtml').src = 'other_file.html';
</code></pre>
<p>如果你还想使用innerHTML来<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>字符串中的html,你可以使用iframe的srcdoc<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>(覆盖src<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>)：</p>
<p></p>
<pre><code>document.getElementById('myHtml').srcdoc = '<div&gt;<p&gt;Some HTML</p&gt;</div&gt;';
</code></pre>
</div>
<!-- jb51.cc --><div class="topcard-tags"><a href="https://m.jb51.cc/tag/domp/" class="tag_link" target="_blank">dom</a></div>
                </div>
              </div>
          </div>
            <!-- row end-->
            <div class="clearfix"></div>
<!-- row -->
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <div class="title"><h1>相关文章</h1></div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-27/11/f075a6110513d0ab28f1b88d160691f5.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/html/4744670.html" title="Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据">Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩+路由跳转router-view渲染数据 路由跳转到同一个页面带参数ID 自动刷新数据</a>
              </div>
              <div class="summary">准备:导入ElementUI 看官网教程 数据准备:JSON数据转换成树状...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/html/4744669.html" title="vue阻止冒泡事件 阻止点击事件的执行 结合div和组件阻止点击事件">vue阻止冒泡事件 阻止点击事件的执行 结合div和组件阻止点击事件</a>
              </div>
              <div class="summary">vue阻止冒泡事件 阻止点击事件的执行 &amp;lt;div @click=&a...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-27/11/fbad9120fcd5cd7f69182180be1296e3.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/html/4744668.html" title="自用代码css获取任意网址的/favicon.ico的方法教程">自用代码css获取任意网址的/favicon.ico的方法教程</a>
              </div>
              <div class="summary">尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...</div>
            </div><div class="list_con">
              <div class="title">
                <a href="https://m.jb51.cc/html/4744667.html" title="JS实现 JSON扁平数据转换树状数据">JS实现 JSON扁平数据转换树状数据</a>
              </div>
              <div class="summary">后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2024/09-27/11/dce7dcae9e15c2485b74d5338d4dee82.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/html/4744666.html" title="JAVA下载文件防重复点击,防止多次下载请求，Cookie方式快速简单集成教程">JAVA下载文件防重复点击,防止多次下载请求，Cookie方式快速简单集成教程</a>
              </div>
              <div class="summary">JAVA下载文件防重复点击,防止多次下载请求，Cookie方式快速简...</div>
            </div><div class="list_con">
                <img src="https://m.jb51.cc/res/2022/01-13/18/54c12d510366a023b24cc827472e7cc0.png" width="100" height="64" style="float:right;margin-left:20px;" />
              <div class="title">
                <a href="https://m.jb51.cc/html/4675610.html" title="Mip是什么意思以及作用有哪些">Mip是什么意思以及作用有哪些</a>
              </div>
              <div class="summary">Mip是什么意思以及作用有哪些</div>
            </div></div>
            </div>
           <!-- row end-->
        </div>
      </div>
    <footer id="footer">
    <div class="container">
        <div class="copyright">
            Copyright © 2018 编程之家. 当前版本 V7.0.16<br>
            <span class="ml5">编程之家 版权所有 
            <a href="https://beian.miit.gov.cn/"  target="_blank"  rel="nofollow">闽ICP备13020303号-8</a>
        </div>
    </div>
</footer>
<script>
(function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
<script src="https://m.jb51.cc/js/count.js"></script>
  </body>
</html>