一大段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了,我試了一下,也是可以的
這裏寫圖片描述

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