一大段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了，我试了一下，也是可以的

一大段html代码转换为页面的方式相关推荐

html 多页面合并,让多个HTML页面使用同一段HTML代码
需求背景一个网站有多个网页:一个网页,可以分为很多部分,举个例子,下面是一个特别简单的网页结构: 一般情况下,footer都是用于标识网站的相关信息(备案.联系方式.制作方),每一个页面都是相同的, ...
写一个静态HTML页面，直接写HTML代码和用JS动态生成代码，哪种方式要好
如果写一个静态HTML页面,直接写HTML代码和用JS动态生成代码,哪种方式要好点?为什么? 不考虑人力因素(手写HTML太费时间排除),请从读取和解析或者其他的角度分析.谢谢添加评论分享按投票 ...
使用内容脚本将代码插入页面上下文
本文翻译自:Insert code into the page context using a content script I'm learning how to create Chrome ext ...
php学习笔记（一）--我们的第一段PHP代码
一.前提是我在Linux服务器上已经安装了PHP 这句代码非常神奇,一句话能变成一个网页.是我们PHP入门的第一段代码. <?phpphpinfo();?> 刚刚我们看到这个代码已然生成了 ...
一小段jQuery代码的分析与优化
今天刚回家,QQ群里就看到有人求助优化一段jQuery代码,简单看了一下,发现如果对jQuery这东西只停留在用的层面,而不知其具体实现的话,真的很容易用出问题来.这也是为什么近期我一直不怎么推崇用j ...
js图片转二进制流_V8是如何执行一段JS代码的？
汇编器编译器解释器解释执行和解释执行什么是V8? V8执行Js代码的过程汇编器编译器解释器众所周知,计算机只能理解机器语言,而我们平时编程用的通常是高级语言,所以源代码通常都要经过层层 ...
.NET 页面刷新方式总结
先看看ASP.NET页面刷新的实现方法: 第一: private void Button1_Click( object sender, System.EventArgs e ) { Response. ...
这段 JavaScript 代码能挖出你所有的访问记录！
有没有想过,简单的一段JavaScript代码就能嗅探出浏览器标签页上的信息,甚至找出你的访问记录?更有甚者,就连Tor浏览器都不放过. --没错,最近有一篇论文中就分析了这一问题. 作者 | Tho ...
V8引擎:编译器和解析器是如何执行一段javascript代码的?
前言前面我已经说完了js引擎是如何存储数据,如何回收垃圾的,但这只是基础罢了,并不是v8引擎的最主要任务,接下来我要讲v8引擎的核心:如何执行js代码,为什么要学习这些东西呢? 前端工具和框架的自身 ...
在编译器和解释器中V8是如何执行一段JavaScript代码的？
本篇文章主要是站在 JavaScript 引擎 V8 的视角,来分析 JavaScript 代码是如何被执行的. 前端工具和框架的自身更新速度非常块,而且还不断有新的出现.要想追赶上前端工具和框架的更 ...

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

PS：本人用的是django框架

一大段html代码转换为页面的方式相关推荐

最新文章

热门文章