-
通过innerHTML动态插入的script无法执行的解决方法
2012-11-05 15:59:07很多时候，需要通过innerHTML动态插入javascript代码到指定的div中，或者通过ajax请求回来的内容里面包含javascript代码，然后把该代码插入指定的div中，但是插入后的script却无法执行。 原因：直接通过...展开全文很多时候，需要通过innerHTML动态插入javascript代码到指定的div中，或者通过ajax请求回来的内容里面包含javascript代码，然后把该代码插入指定的div中，但是插入后的script却无法执行。
原因：直接通过innerHTML动态嵌入的script，浏览器会当做普通的文本，不会当作SCRIPT节点维护到DOM里面，所以调用的时候找不到。
解决方法：用innerHTML嵌入以后，通过DOM从myDIV中取出嵌入的script节点，然后新创建一个script节点，并把嵌入的script里面的内容也赋给新创建的script节点，然后把这个新节点追加到页面的head节点中，这样就可以调用到里面的函数了。
比如下面的代码，加上红颜色的内容即可（firefox下测试通过，ie需要再调整一下语法）
<html>
<head></head>
<body>
<button οnclick="getContent();" name="getContent" id="getContent">Get Content</button>
<p></p>
<div id="myDiv"></div>
<p></p>
<script type="text/javascript">
function getContent() {
var str = "added content \<br\>" +
"\<input name=\'myname\' id=\'myname\'\>" +
"\<button οnclick=\'getName()\;\' name=\'getName\' id=\'getName\'\>Get Name\<\/button\>" +
"\<script type=\'text\/javascript\'\>" +
"function getName() {" +
"alert(\'ok\')\;" +
"document.getElementById(\'myname\').value = \'Bill\'\;" +
"}" +
"\<\/script\>";
document.getElementById("myDiv").innerHTML=str;
[color=red]var myDivScript = document.getElementById("myDiv").getElementsByTagName("SCRIPT").item(0);
var newScript = document.createElement("SCRIPT");
newScript.innerHTML = myDivScript.innerHTML;
document.getElementsByTagName("HEAD").item(0).appendChild(newScript);[/color]
}
</script>
</body>
</html>
-
innerHTML中script脚本不执行的问题
2014-02-10 15:53:38有一个div1，我希望向后台发送请求，然后这个请求会返回一个html页面代码，我希望把返回内容填充到div1里，但是html里所包含的script将不会执行。有一个好的办法就是不要用innerHTML，而是用jquery的load方法展开全文有时候，我们会想到这样做。有一个div1，我希望向后台发送请求，然后这个请求会返回一个html页面代码，我希望把返回内容填充到div1里，但是html里所包含的script将不会执行。有一个好的办法就是不要用innerHTML，而是用jquery的load方法
-
如何在点击一个<div>时去执行一个javascript里的函数？
2018-05-18 10:43:17调用，但我将它改成div id="a" onclick="a()"调用函数a/div,为什么就调用不了了？ ``` <script> function a(){ ... } </script> ${pageContext.request.contextPath }/login.action" method=... -
DIV动态赋值
2018-08-06 23:00:54<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"...js动态设置div的值.html</title>展开全文<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js动态设置div的值.html</title>
</head>
<body>
<form method="post" name="form1">
<label><input type="radio" name="radio" value="1-10 岁" οnclick="ok(this.value);">1-10 岁</label>
<label><input type="radio" name="radio" value="11 岁" οnclick="ok(this.value);">11 岁</label>
<label><input type="radio" name="radio" value="12-120 岁" οnclick="ok(this.value);">12-120 岁</label>
</form>
<div id="test">11111</div>
<script language="javascript" type="text/javascript">
function ok()
{
var temp=document.getElementsByName("radio");
for (i=0;i<temp.length;i++){
//遍历Radio
if(temp[i].checked)
{
//alert("你选择了"+temp[i].value);
//获取Radio的值
document.getElementById('test').innerHTML = temp[i].value; //必须如此格式写，用jquery的获取值的方式不能达到效果 ，ly 2013-02-07
}
}
}
</script>
</body>
</html>
-
vue+element项目里实时监听某个div宽度的变化，然后执行相应的事件
2019-04-12 17:40:56背景：vue项目中用到echarts图表，页面上有侧边栏，侧边栏收缩图表不能自适应，想通过监听内容部分的宽度让图表resize，试过window带的resize，只能监听浏览器窗口大小变化，为了监听某元素区域的变化而使echarts的...展开全文背景：vue项目中用到echarts图表，页面上有侧边栏，侧边栏收缩图表不能自适应，想通过监听内容部分的宽度让图表resize，试过window带的resize，只能监听浏览器窗口大小变化，为了监听某元素区域的变化而使echarts的尺寸重置。
本次解决采用 element-resize-detector 可以完美的解决
思路：因为收缩侧边栏的时候右侧的区域会自动适应，但是echarts不会随之改变
element提供的 element-resize-detector 可以轻松解决问题的存在
第一步：在项目中安装 element-resize-detector
npm install element-resize-detector第二步：在项目中使用
html
<div id="test"> <div id="eChart"> </div>（1）script引入
<script src="node_modules/element-resize-detector/dist/element-resize-detector.min.js"></script> // With default options (will use the object-based approach). var erd = elementResizeDetectorMaker(); // With the ultra fast scroll-based approach. // This is the recommended strategy. var erdUltraFast = elementResizeDetectorMaker({ strategy: "scroll" //<- For ultra performance. }); //监听元素size变化，触发响应事件 erd.listenTo(document.getElementById("test"), function(element) { var width = element.offsetWidth; var height = element.offsetHeight; console.log("Size: " + width + "x" + height); });（2）require 引入使用，在cli项目中使用，需要用到的页面 ***.vue 引入
var elementResizeDetectorMaker = require("element-resize-detector")在mounted中启用
var erd = elementResizeDetectorMaker() erd.listenTo(document.getElementById("test"), function (element) { var width = element.offsetWidth var height = element.offsetHeight that.$nextTick(function () { console.log("Size: " + width + "x" + height) //使echarts尺寸重置 that.$echarts.init(document.getElementById("eChart")).resize() }) })因为gif图为录屏所以导航栏比较卡顿，勉强看一下哦
附大GIF图压缩工具地址：https://ezgif.com/resize/ezgif-1-d76f5cf7b36f.gif
基本解决问题，有更好的方案，欢迎留言指导，谢谢
更新 自定义指令方法
directives: { // 使用局部注册指令的方式 resize: { // 指令的名称 bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象 let width = '', height = ''; function isReize() { const style = document.defaultView.getComputedStyle(el); if (width !== style.width || height !== style.height) { binding.value(); // 关键 } width = style.width; height = style.height; } el.__vueSetInterval__ = setInterval(isReize, 300); }, unbind(el) { clearInterval(el.__vueSetInterval__); } } } //然后在html中 <div v-resize="resize"></div> // 绑定的resize是一个函数 //在methods中 resize() { // 当宽高变化时就会执行 //执行某些操作 }
-
div左/右键点击执行事件
2018-01-16 13:53:59////点击子级div时，不想执行上面方法，可解绑自定义的点击事件 //$(".left-right-click").unbind("mousedown").bind("contextmenu", function (e) { // e.preventDefault(); // return false; ... -
JQuery实现点击里层div事件，不触发外面的div的点击事件
2020-03-03 10:02:14<!DOCTYPE html> <... <head> ...meta charset="UTF-8">...JQuery实现点击里层div事件，不触发外面的div的点击事件</title> </head> <body> <div id="outter" styl... -
jquery动态改变div背景色出现类似跑马灯效果
2018-03-14 17:09:38<!DOCTYPE html> <html> <head> ...script src=".../script&...script&.../** 定时器执行改变背景色代码*/ ...//页面加载完成后每隔1秒执行一次（循环 -
JQuery实现(阻止事件冒泡,不触发父级标签点击事件)点击div里面的a的能触发点击事件，但是不触发外面的div的...
2016-01-13 15:48:33现在有一个div，这个div里面有一个a标签，div和a都是有点击事件的，但是我想要做到点击a标签的时候就只触发里面a标签的点击事件，不想执行外层div的点击事件。 使用JQuery可以简单地实现，只需要加入如下代码： ... -
js动态创建和删除div
2017-01-20 16:43:03研究了一下js的动态生成div功能。特此一记： var i=1; function cDiv(){ var oDiv=document.createElement("div"); oDiv.style.border="1px solid black"; oDiv.style.width="500px"; oDiv.style.height="300px"; ... -
弹出DIV,父窗口不可编辑，页面执行跳转
2009-06-26 11:26:00... ...--></mce:style><style type="text/css" mce_bogus="1">....运行d.html父窗口不可编辑，然后执行进度条跳转！现在是执行事件后再跳转，我想自动跳转，现在网上不好找，先粘上再说，有建议提一下，呵呵。 -
js动态生成div和事件
2014-08-21 16:41:01var divId=1; //动态生成单纯的div function CreateOuterDiv() { var obj=document.createElement("div"); obj.id="myDiv"+divId; divId++; obj. -
div拖拽实现延伸
2018-07-12 15:00:37div拖拽 原理： 鼠标事件 mousedown mousemove mouseup 注意事项: 被拖动的div的position属性值一定是absolute。 onmousedown事件需要在window.onload时加载。 如果被拖动的div上有文字会有自带的文字... -
css+div动态图片切换
2017-12-18 15:07:261 css+div可以实现动态图片切换。通过修改className。 如：function aaa(){ document.getElementById("div1").className="a1"; document.getElementById("span1").className="a_1"; document.... -
点击一个按钮显示div，点击div之外的地方div隐藏，点击div之内的地方div不隐藏
2018-06-10 15:47:18<input id="btnClick" type="button" value="原生写法" class="...div id="pop" class="centerDiv radius" style="width: 260px; height: -
JS遍历DIV里的东西
2010-11-23 11:50:00有时候使用不是很方便 如果名字太多的话 方法就显得不够好了， 那么这个时候如果是同一个div下的所有的一个类型的控件需要 去执行相同的方法的话 那么我们就要遍历去得到div下面的内容的值了 ... -
JS中div的动态添加
2018-10-12 01:48:08//添加一个500*500的div快 <div id="aa" style="width:500px;height:500px;background-color:#999;"> </div> //添加一个500*500的表格 <div id=&... -
chrome扩展执行tabs.executeScript报错提示no main frame
2014-12-30 05:26:30在选项卡里打开www.baidu.com，然后在background里后台运行chrome.tabs.executeScript(cid, {code:"document.body.innerHTML +='< div >aa< /div >'",allFrames:false}); 提示no main frame；不知道怎么解决。 -
jQuery实现鼠标悬浮在div上时候动态浮动另外一个div层盖住第一个div层
2015-03-19 16:16:30无标题文档 .caption{ width:200px; height:100px; background-color:red; position:fixed; } .layer{ width:200px; background-color:blue; position:fixed; .../*和div的高度一致*/ display:no -
jquery动态添加删除div--事件绑定,对象克隆
2011-07-29 14:49:27我想做一个可以动态添加删除div的功能。中间遇到一个问题，最后在phpchina问答区版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是：事件的绑定和销毁(unbind)，另外还可以使用clone,通过克隆可以很... -
怎么在<div>里调用js函数
2016-07-18 16:49:56我想把以上的天、时、分、秒单独放在下面的几个<div>里，让每个框显示对应的数据 ``` <div class="dash days_dash wow zoomIn" data-wow-delay="0.4s"> <div class="digit"> </script></div> ... -
js动态添加的DIV中的onclick事件简单实例
2016-12-06 09:00:33最简单的是这样：<inputtype="button"onclick="alert(this.value)"value="我是button"/>...动态添加onclick事件：<inputtype="button"value="我是button"id="bu"> <scripttype="text/javascript"> ... -
Div里面载入另一个页面的实现(取代框架)（AJax）
2014-04-14 14:26:13随着框架越来越不火了，HTML5就不对框架支持了，iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意，使用也更方便 今天突然遇到一个问题，那就是需要导入另一个页面显示在当前页的Div里面 ... -
jQuery执行脚本，在指定的div添加（附加）html代码
2015-09-14 15:22:39jQuery中需要执行指定的js代码方法 A B C D $(document).ready(function() { $('#letter-c a').click(function(event) { event.preventDefa -
动态修改参数cron的值来实现Spring自带定时器动态的执行任务
2018-03-20 18:17:06最近在做一个项目二次开发：安防系统中用到了Spring自带的定时器，本来已经实现...一开始想着修改定时任务的执行周期还不简单，把服务停下来，改下任务的cron参数，再重启服务就搞定了。但有没有一种可能，在不停服... -
js的window.onload不执行
2017-11-06 23:42:51一、window.onload可以正常执行执行的代码 <script> window.onload=function() { alert(1); } </script> <div id="div">sdfasdf</div> </ht -
div onload事件
2018-03-04 14:01:06写了个小页面，测试了下js, 想让div在加载的时候执行一段js，死也不起作用。谷歌了一下发现div 不支持onload事件，同样p也是不支持onload事件的。这国内的各大教程都写着是支持各种事件的啊。坑。。... -
Google 绘图不能在 android 中的 webview 里执行
2013-04-09 05:53:01在基于web浏览器的台式机上能获取期望的输出值，但是当用android webview执行相同的代码却什么也不能输出。为什么啊？ 贴出我的html代码和android webview代码: WebView webview = (WebView) this.findViewById...
收藏数
181,049
精华内容
72,419