innerHtml 渲染含有script 的htnl

2024-09-02

让 innerHTML 进来的 script 代码跑起来

今天来简单聊聊如何让 innerHTML 进来的 scrip 代码跑起来的问题. 前台请求一个接口,接口返回一些 HTML 标签拼接成的字符串,以供前端直接 innerHTML 生成 DOM 元素,这样的做法非常普遍.但是你是否遇到过,如果字符串中拼接的 HTML 标签中有 script 标签,那么该段脚本是无法执行的,这并不是 bug,而是 w3c 的文档规定的. 比如如下这段代码,innerHTML 插入的脚本(alert)并不会执行: <div id="myDiv">

执行 innerHTML 里的 <script>

原文:执行 innerHTML 里的 <script> 背景有时候我们会有把一整段 HTML 动态塞进页面的需求,例如渲染了一个模板,从服务器端获取了一段广告代码等.一般情况下我们使用 container.innerHTML 即可.但是当 HTML 中出现 script 标签时,直接使用 innerHTML 并不会执行它. 一个例子 <div id="test">Hello HTML</div> <script> document.ge

使用innerHTML生成的script节点不会发出请求与执行text属性

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box"></div> <script> var boxEl = document.querySelector('#box') boxEl.innerH

html页面的渲染And<script>位置的影响

周末加班敲代码的时用到了<script>标签,突然想到了一个问题:别的自测项目里面<script>我把他放在了不同位置,这里应该会对代码的执行与渲染后影响吧?于是今天专门进行了查询,趁机总结以下: html 文档的解释方式&顺序: 预备知识:(需要简单理解同步/异步的区别) 同步,是所有的操作都做完,才返回给用户结果.即写完数据库之后,在相应用户,用户体验不好. 异步,不用等所有操作等做完,就相应用户请求.即先相应用户请求,然后慢慢去写数据库,用户体验较好. html文档的

页面动态加入<script>标签并执行代码

在页面中动态追加html片段的时候,有时候动态添加的代码会含有<script>标签,比如用了一些模板引擎,或者你的代码有些复杂的时候.然而我们用DOM提供的innerHTML方式来添加代码的时候,<script>标签中的代码并不能执行,如果有src属性,指向的外联文件也不会被加载,这并不是浏览器的bug,因为w3c文档就是这么规定的. 那我们有什么办法可以恢复追加的<script>标签的代码执行能力呢? 重新构造<script>标签

Document.write和 InnerHTML

Document.write 定义: Document.write()这种方法是将文本字符串写入document.open()打开的文档流. document.write()方法可以用在两个方面:页面载入过程中用实时脚本创建页面内容,以及用延时脚本创建本窗口或新窗口的内容.该方法需要一个字符串参数,它是写到窗口或框架中的HTML内容.这些字符串参数可以是变量或值为字符串的表达式,写入的内容常常包括HTML标记语言. 注意: 1. 在head中运行document.write(),则参数写在bod

java script 学习

用JavaScript输出文本 <p>我的第一个段落.</p> <script> document.write(Date()); </script> <script> document.write("<h1>这是一个标题</h1>"); document.write("<p>这是一个段落</p>"); </script> 用JavaScript改变

浏览器渲染页面原理，reflow、repaint及其优化

浏览器的主要组件包括: 1. 用户界面 - 包括地址栏.前进/后退按钮.书签菜单等.除了浏览器主窗口显示的你请求的页面外,其他显示的各个部分都属于用户界面. 2. 浏览器引擎 - 在用户界面和渲染引擎之间传送指令. 3. 渲染引擎 - 负责显示请求的内容.如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上. 4. 网络 - 用于网络调用,比如 HTTP 请求.其接口与平台无关,并为所有平台提供底层实现. 5.

如何优雅的把后台数据（通常是JSON）轻松渲染到html页面

如何优雅的把后台数据(通常是JSON)轻松渲染到html页面在我们做前后端分离的时候,都有遇到过一些看起卡很简答,确无从下手的问题把.比方说后台给了前端一个list集合,集合里面有很多学生,我们现在要对这些学生在前端渲染展示.我们怎么办? 当然如果你是使用了强大的框架,完全不必要在意这些问题了. 但是当我们啥都没有的时候,我们可以考虑使用handlerbars这款强大的工具.可以非常轻松,侵入化很小,快捷的实现数据到页面的渲染. 1. 模板引擎handlerbars - 官方网站:http:/

innerHTML、innerText、outerHTML、outerText的区别

我们在用JS/JQ 获取或设置元素内容的时候,通常是获取或设置指定元素之间的内容 <script> //JS document.getElementById('test').innerHTML="设置元素内容"; //JQ $("#test").val("设置元素内容"); </script> 但是如果我们需要获取包含元素本身的内容的时候就会变得很麻烦,这时候用outerHTML便可以轻松解决问题了. 原HTML为: &l

HTML5触屏版多线程渲染模板技术分享

前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源框架KitJs时候,写过类似的组件http://www.cnblogs.com/xueduanyang/archive/2012/05/30/2526422.html ,其原理就是改造代码中的for为setInterval,改递归为尾递归等等,为可怜的刷新率60Hz争取17ms的微弱时间. 当然了,

夺命雷公狗-----React---1--页面的渲染

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/react.js"></script> <script src="./js/react-dom.js"><

JS-003-innerText 与 innerHTML 区别

此文主要讲述在使用 innerText 和 innerHTML 获取元素中间值时的差别,我个人将二者的区别简单的理解为: webelement.innerText : 获取的是页面元素显示的文本 webelement.innerHTML : 获取的是元素中间的 HTML 源码闲话少述,就此上码.敬请小主参阅,若有不足之处,敬请大神指正,不胜感激! 对应的 HTML 页面源码如下所示: <html> <head> <meta charset='utf-8'> <t

Java Script基础（七） HTML DOM模型

一.HTML DOM. HTML DOM的特性和方法是专门针对HTML的,HTML中的每个节点都是一个对象,通过访问属性和方法的方式,让一些DOM操作更加简便,在HTML DOM中有专门用来处理白哦个及其元素的属性和方法. HTML DOM参考手册下面以Table为例来讲解HTML DOM动态操作表格. 1.Table对象(表格) 在HTML DOM中, table对象代表一个HTML表格,TableRow对象代表HTML表格的行,tableCell对象代表HTML表格的单元格.在HTML中可

用script实现内容显示，并使用json传输数据

今天做一个项目,要求是div内为空所有代码都写在<script>里面,<script>里面的文本用json传输.这个对我一个刚出校门,用div写了三年的页面的人来说真的好难,更何况我进公司之前根本就不知道什么json,我很庆幸我在这个公司里面有同事带带我,教教我,有不会的也能问问他们.真的是感觉这三年都白学了,学的知识完全不能跟社会接轨... 还好,最后在教程和同事的帮助下写出来了,下面贴上源代码. <!DOCTYPE html><html> <he

解决 innerHTML 在 IE6-IE9中不能赋值的bug

在MSDN可以了解跟多,关于innerHTML的介绍,但是在这里只要是解决表格部分问题 MSDN上有这样的记录: When using innerHTML to insert script, you must include the defer attribute in the script element. The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table,

转:script中的async和defer

script中的async和defer defer: This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed. sync: Set this Boolean attribute to indicate that the browser should, if possible, execute t

innerText和innerHTML的区别

innerhtml用法 innertext用法以及innerHTML与innertext的区别,看完这个大家以后在实际应用中,就可以选择合适的方法.尽可能的考虑到兼容性. test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签. 上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”. test.innerText: 从起始位置到终止位

让innerHTML方法添加到元素里的js可以被解析执行

<!DOCTYPE html> <html> <head> </head> <body> <div id="test" style="background:skyblue">test innerHTMLJS</div> <div onclick="say();" style="background:skyblue; margin:20px;&quo

1关于script标签属性，注意点，浏览器文档模式，各种数据类型的转化

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title></h

innerHtml 渲染含有script 的htnl

热门专题