一大段html代码转换为页面的方式

PS:本人用的是django框架

最近在忙着一个项目,是做RSS订阅的。遇到一个问题,就是有的RSS里面的items元素中的 description这个元素,存放的是一大段html代码:如下图
这里写图片描述

之后要是直接显示在页面中,看起来很是难看

这里写图片描述

想了很多方法,一开始是打算用<iframe></iframe>的方法,但是因为订阅的RSS中的items数量是不确定的,不可能写一大堆html文件用来存储。

于是脑洞了一番,因为<iframe src=""></iframe>中的src是可以传值的,于是写了<iframe src="/test?a={{item}}"></iframe>(PS注意:{{item}}是后台传的值),直接将整个html代码传到后台(这个html代码是上图中的那一大段),结果发现,纯文字的时候,是可以成功传到后台的
这里写图片描述
上图是传递的值,但是!!!如果传的不是纯文字,换成我们上图的那一大段html代码,数据会被截断!!!
这里写图片描述
这是我获的数据的方法,讲道理应该都存到a里面才对,然后把a的值传到text.html中(text.html文件中只有{{description}})讲道理我们想的到的应该是下图这个样子的
这里写图片描述
(PS黑色部分是<iframe></iframe>显示的小的html窗口)

但是,显示却是这个样子的
这里写图片描述
他喵的竟然被截断,于是想了想应该是用get传递的时候,符号都被转义了,,于是出现了被截断的情况…于是放弃了这个想法

后来想到用js来搞事
一开始是受到id的障碍,因为items的数目不确定,我用的是{% for item in items %}循环出来,但是id不能一样呀,想了半天,想到用js来动态的修改!
js代码如下


var myid="1";
function mytest() {
    var id=document.getElementById("general");
    id.id=myid;
    myid++;
    b=$('#'+myid).text()
    $('#'+myid).html(b)
}

for循环生成item的代码如下


{% for item in urlitems.0 %}
<div class="accordion-inner">
    <a style="color: mediumspringgreen;" href={{item.link }}> 标题:{{ item.title }} </a>
    <br>
    <br>
    <div id="general">
        <p>{{ item.description }}</p>
    </div>
    <script>
    mytest()
    </script>
    </div>
{% endfor %}

让一开始的id是general,然后循环一次修改一次id的值,注意myid要放到函数外面做全局变量,要是放到函数里面每次调用的时候都会被重新赋值为1
于是,愉快的解决了id的问题
那么接下的问题就好解决的,用js获得传来的id中的<description>元素里面的内容,js代码中的第6行,在用第7行的代码将id的内容转换为html格式的,最终,大功告成了
这里写图片描述



这里再次做一下补充,昨天发完文章,同学告诉我可以直接用django官网文档里面提供的一个方法

<div id="general"><p>{{ item.description|safe }}</p></div>

就是直接在上文中的item.description后面加一个|safe就能转成html了,我试了一下,也是可以的
这里写图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章