V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
yearliny
V2EX  ›  问与答

如何在 HTML 网页中展示 HTML 源码

  •  
  •   yearliny · Nov 24, 2017 · 2065 views
    This topic created in 3085 days ago, the information mentioned may be changed or developed.

    对 HTML、CSS、jQuery 处于一知半解的学习状态。往页面中插入 HTML 源码作为展示时,总是 载入 这个页面,包括源码中引入的 JS/CSS 都被执行了。

    $.post("/test", function(data){
    	$("#page-html").html('"'+data.body+'"');
    }, 'json');	
    

    网页有个简单的 jQuery 脚本,通过一个 Ajax 请求获得一个页面的 HTML 源码,并且把源码插入到 <pre id="page-html"></pre> 内,通过观察发现他人的网页插入源码显示时,源码都在 " 双引号的包括中,于是在展示时,给服务端返回的 HTML 源码前后分别加上了一个双引号。

    但是在实际使用过程中,依然时直接完全的载入了 HTML 网页,而不是作为源码显示,而加入的双引号显示时是在 HTML 页面中的开始位置加入了三个双引号。

    这是哪里出了问题呢?

    8 replies    2017-11-24 10:50:50 +08:00
    TimePPT
        1
    TimePPT  
    PRO
       Nov 24, 2017 via iPhone
    <code>
    zjqzxc
        2
    zjqzxc  
       Nov 24, 2017   ❤️ 1
    <script type='text/html' style='display:block'>
    <h1>hello world</h1>
    </script>
    GG668v26Fd55CP5W
        3
    GG668v26Fd55CP5W  
       Nov 24, 2017 via iPhone   ❤️ 1
    把<>替换成 html 编码
    sneezry
        4
    sneezry  
       Nov 24, 2017 via iPhone
    试试 innerText 呢
    wayket
        5
    wayket  
       Nov 24, 2017   ❤️ 1
    $("#page-html").text()
    yearliny
        6
    yearliny  
    OP
       Nov 24, 2017
    @wayket 太感谢了,问题解决了~ :)
    yearliny
        7
    yearliny  
    OP
       Nov 24, 2017
    @falcon05 这个方法可以解决问题,替换 HTML 编码的方式也能够以源码的方式显示,但是这种方式显示可读性不太好。
    yearliny
        8
    yearliny  
    OP
       Nov 24, 2017
    @zjqzxc 我使用你的源码也能正常显示<h1>标签,让我不解的是,当我把后端传入的 HTML 源码放入你给的<script>块时,依然是载入了网页。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5796 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 57ms · UTC 06:44 · PVG 14:44 · LAX 23:44 · JFK 02:44
    ♥ Do have faith in what you're doing.