精华内容
下载资源
问答
  • 很多时候,需要通过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 id="a" onclick="a()"调用函数a/div,为什么就调用了了? ``` <script> function a(){ ... } </script> ${pageContext.request.contextPath }/login.action" method=...
  • DIV动态赋值

    千次阅读 2018-08-06 23:00:54
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;  &lt;head&gt;  &lt;meta http-equiv="Content-Type"...js动态设置div的值.html&lt;/title&gt;

    <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项目中用到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; ...
  • <!DOCTYPE html> <... <head> ...meta charset="UTF-8">...JQuery实现点击div事件,触发外面的div的点击事件</title> </head> <body> <div id="outter" styl...
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...script src=".../script&...script&.../** 定时器执行改变背景色代码*/ ...//页面加载完成后每隔1秒执行一次(循环
  • 现在有一个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"; ...
  • ... ...--></mce:style><style type="text/css" mce_bogus="1">....运行d.html父窗口可编辑,然后执行进度条跳转!现在是执行事件后再跳转,我想自动跳转,现在网上不好找,先粘上再说,有建议提一下,呵呵。
  • js动态生成div和事件

    千次阅读 2014-08-21 16:41:01
    var divId=1; //动态生成单纯的div function CreateOuterDiv() { var obj=document.createElement("div"); obj.id="myDiv"+divId; divId++; obj.
  • div拖拽实现延伸

    万次阅读 2018-07-12 15:00:37
    div拖拽 原理: 鼠标事件 mousedown mousemove mouseup 注意事项: 被拖动的div的position属性值一定是absolute。 onmousedown事件需要在window.onload时加载。 如果被拖动的div上有文字会有自带的文字...
  • css+div动态图片切换

    千次阅读 2017-12-18 15:07:26
    1 css+div可以实现动态图片切换。通过修改className。 如:function aaa(){  document.getElementById("div1").className="a1";  document.getElementById("span1").className="a_1";  document....
  • &lt;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快 &lt;div id="aa" style="width:500px;height:500px;background-color:#999;"&gt; &lt;/div&gt; //添加一个500*500的表格 &lt;div id=&...
  • 在选项卡打开www.baidu.com,然后在background后台运行chrome.tabs.executeScript(cid, {code:"document.body.innerHTML +='< div >aa< /div >'",allFrames:false}); 提示no main frame;知道怎么解决。
  • 无标题文档 .caption{ width:200px; height:100px; background-color:red; position:fixed; } .layer{ width:200px; background-color:blue; position:fixed; .../*和div的高度一致*/ display:no
  • 我想做一个可以动态添加删除div的功能。中间遇到一个问题,最后在phpchina问答区版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbind),另外还可以使用clone,通过克隆可以很...
  • 我想把以上的天、时、分、秒单独放在下面的几个<div>,让每个框显示对应的数据 ``` <div class="dash days_dash wow zoomIn" data-wow-delay="0.4s"> <div class="digit"> </script></div> ...
  • 最简单的是这样:<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中需要执行指定的js代码方法 A B C D $(document).ready(function() { $('#letter-c a').click(function(event) { event.preventDefa
  • 最近在做一个项目二次开发:安防系统中用到了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事件的。这国内的各大教程都写着是支持各种事件的啊。坑。。...
  • 在基于web浏览器的台式机上能获取期望的输出值,但是当用android webview执行相同的代码却什么也能输出。为什么啊? 贴出我的html代码和android webview代码: WebView webview = (WebView) this.findViewById...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 181,049
精华内容 72,419
关键字:

动态div里script不执行