欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于使用jquery的load方法时被加载页面内部script失效问题的一次探索

程序员文章站 2022-06-15 18:29:51
事先声明:本文由初学者撰写,为一次探索的过程,可能有不严谨和准确的地方,望读者多多谅解并积极指正! 场景描述: 在一次前端开发过程中,我使用了一个网页模板,该模板包含一个主页和四个子页面,如下图: 具体的效果是,点击主页中的一个按钮会在弹框内显示子页面的内容,如下图: 具体的实现是在主页面中留出面板 ......

事先声明:本文由初学者撰写,为一次探索的过程,可能有不严谨和准确的地方,望读者多多谅解并积极指正!

场景描述:

在一次前端开发过程中,我使用了一个网页模板,该模板包含一个主页和四个子页面,如下图:

关于使用jquery的load方法时被加载页面内部script失效问题的一次探索

 

 

 具体的效果是,点击主页中的一个按钮会在弹框内显示子页面的内容,如下图:

关于使用jquery的load方法时被加载页面内部script失效问题的一次探索

 

关于使用jquery的load方法时被加载页面内部script失效问题的一次探索

 

 

具体的实现是在主页面中留出面板,并在点击按钮时通过jquery的load方法将子页面加载到面板中:

index.html 部分代码

<div class="cd-folding-panel">
        
        <div class="fold-left"></div> <!-- this is the left fold -->
        
        <div class="fold-right"></div> <!-- this is the right fold -->
        
        <div class="cd-fold-content">
            <!-- content will be loaded using javascript -->
        </div>

        <a class="cd-close" href="#0"></a>
</div> <!-- .cd-folding-panel -->

 

 main.js 部分代码

var foldingcontent = foldingpanel.find('.cd-fold-content');
foldingcontent.load(url+' .cd-fold-content > *', function(event){
    settimeout(function(){
        $('body').addclass('overflow-hidden');
        foldingpanel.addclass('is-open');
        maincontent.addclass('fold-is-open');
    }, 100);
});

 

 问题描述:

问题主要出在子页面上,如上图展示过的,我想要在子页面实现获取用户输入信息,并提交到服务器进行查询,然后将获取到的json信息以表格的形式展示出来,大概要求的效果是这样的(不要在意表格的内容,那只是示例):

关于使用jquery的load方法时被加载页面内部script失效问题的一次探索

 

 

于是我就把相应的代码写到了item1.html的<script>标签中

item1.html(这部分可以不看)

<!doctype html>
<html lang="en" class="no-js">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/reset.css"> <!-- css reset -->
    <link rel="stylesheet" href="css/style.css"> <!-- resource style -->
    <script src="js/modernizr.js"></script> <!-- modernizr -->
      
    <title>在线快递查询系统</title>
</head>
<body>
    <div class="cd-fold-content single-page">
        <h2>查快递</h2>
        <div style="width:80%;height:100px;margin:30px">
            <form id="form1" onsubmit="return false" action="##">
                <input required='' type='text' id="phonenumber">
                <label alt='请输入手机号码' placeholder='手机号码'></label>
                <input id="querybtn" type="submit" onclick="postquerymsg()" value="submit" >
            </form>
            <div style="height:50px">
            </div>
            <table id="table" class="gridtable" style="display:none">
                <tr>
                     <th>brandname</th>
                     <th>modul</th>
                     <th>quantity</th>
                     <th>datecode</th>
                     <th>remark</th>
                </tr>
            </table>
        </div>   
    </div>
<script src="js/jquery-2.1.1.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="js/main.js"></script> <!-- resource jquery -->
<script>
function postquerymsg(){
    
     $.ajax({
         type:"get",
         url:"resources/haha.json",
         datatype:"json",
         async:false,
         success:function(data){
             var table=document.getelementbyid("table");
             table.style.display = 'block';
             for(var i=0;i<data.length;i++){
                                     var row=table.insertrow(table.rows.length);
                                     var c1=row.insertcell(0);
                                     c1.innerhtml=data[i].brandname;
                                     var c2=row.insertcell(1);
                                     c2.innerhtml=data[i].modul;
                                     var c3=row.insertcell(2);
                                     c3.innerhtml=data[i].quantity;
                                     var c4=row.insertcell(3);
                                     c4.innerhtml=data[i].datecode;
                                     var c5=row.insertcell(4);
                                     c5.innerhtml=data[i].remark;
                                 }
         },
         error:function(errorthrown){
         console.log(errorthrown);
          }
      });
    }
</script>
</body>
</html>

于是运行在chrome时出现了 “点击submit按钮没有反应” 的问题,按f12打开控制台,查找到如下错误:

关于使用jquery的load方法时被加载页面内部script失效问题的一次探索

 

 

 发现是由于没找到 postquerymsg(我的按钮点击方法)的定义造成的,然后我就寻思可能是写在 item1.html 中的脚本失效了。

上网搜索一下,发现问题在于 jquery 的 load 方法会把被加载页面的 script 脚本忽视掉,而网络上给出的解决方案也大都不奏效或不能令我满意。

解决过程:

问题的解决是从我开始深入认识 load 方法开始的:

以下是w3school给出的关于load方法的定义

load() 方法通过 ajax 请求从服务器加载数据,并把返回的数据放置到指定的元素中。

由是我注意到这个方法似乎是把被加载页面 “放入” 加载页面,那么主体按理来说是加载页面,因此如果我把要在被加载页面运行的脚本放到加载页面里,应当就可以正常运行了。而控制台中的报错信息也证实了我的想法(出错位置是在 index.html 而不是 item1.html)

关于使用jquery的load方法时被加载页面内部script失效问题的一次探索

 

 

为了保持代码美观,这次我使用了外置 js 脚本:

index.html 部分代码

<script src="js/itemaction.js"></script>

itemaction.js 内容

function postquerymsg(){
     
 $.ajax({
     type:"get",
     url:"resources/haha.json",
     datatype:"json",
     async:false,
     success:function(data){
         var table=document.getelementbyid("table");
         table.style.display = 'block';
         for(var i=0;i<data.length;i++){
                                 var row=table.insertrow(table.rows.length);
                                 var c1=row.insertcell(0);
                                 c1.innerhtml=data[i].brandname;
                                 var c2=row.insertcell(1);
                                 c2.innerhtml=data[i].modul;
                                 var c3=row.insertcell(2);
                                 c3.innerhtml=data[i].quantity;
                                 var c4=row.insertcell(3);
                                 c4.innerhtml=data[i].datecode;
                                 var c5=row.insertcell(4);
                                 c5.innerhtml=data[i].remark;
                             }
     },
     error:function(errorthrown){
     console.log(errorthrown);
      }
  });
}

 

 如此就能正常运行了

待解决的问题:

就标题而言,这次探索已经圆满完成,但事实上仍然有一个问题悬而未决,希望路过的大佬能替我指正:

问题一:

在上文中 “问题描述” 部分中,我刻意提及 “在chrome中” 出现点击按钮无反应的问题,原因是我在 ie 浏览器中打开界面时是可以运行的,并且控制台中没有任何报错信息:

关于使用jquery的load方法时被加载页面内部script失效问题的一次探索

 

 

 

 

 

 希望各位大佬不吝赐教,谢谢!