• EasyUI-panel 内嵌页面上的js无法被执行


    一直以来群里里面很多人反应,在用tab加载界面的时候,界面里面的js不会执行。今天GodSon在此说明一下原因。

    不管是window,dailog还是tab其实质最终都是继承了panel。panel有两种方式展示内容。第一是直接硬编码写到出来。第二是通 过href属性,加载外部html片段。在这里就就设计到了一个html片段的概念。这个概念在easyui的整体架构中,是一个很重要的概念,因为很多 人没弄明白,所以从中引发出了很多问题。我举个例子来说明html片段。

    大家都知道html的标准结构是:

    复制代码
    <html>
    <head>
        <title>这是完整的html结构</title>
        <script></script>
    </head>
    <body>
    <div>内容</div>
    </body>
    </html>
    复制代码

    一般我们写html代码都应该遵循此此结构。而所谓的html片段就是上面完整结构中的内容部分。

    <div>内容</div>

    虽然我们也会建立一个文件如b.html来保存html片段,但是在这个b.html中我们只需要编写<body>里面的内容不需要在把html的标准结构写出来。

    好了了解html片段的概念,就来说下我在使用个easyui的过程会大量出现的html片段。

    其实在使用easyui中你没嵌入iframe的话,除了index界面会有完整的html结构,其他的所有界面都以html片段的形式存在。就那tab来说,首先在界面上定义一个tabs

    复制代码
    <html>
    <head>
    <title>tab测试界面</title>
    </head>
    <body>
    <div class="easyui-tabs" fit="true" plain="true" style="height:100px;300px;">
        <div title="Title1" style="padding:10px;" href="tabs_href_test.html"></div>
        <div title="Title2" style="padding:10px;">Content 2</div>
        <div title="Title3" style="padding:10px;">Content 3</div>
    </div>
    </body>
    </html>
    复制代码
     

    看到上面片段的title=”Title1“处我定义了一个tab其中使用了href属性,就表明改此处是要从外部加载一个html片段来显示tab的内容。下面是我定义的tabs_href_test.html的内容

    <script type="text/javascript" src="test.js"></script>
    <script>alert("我是外部加载的html片段");</script>
    <div><p>我是外部加载的html片段</p></div>
     

    test.js的内容:

    alert("我是外部界面导入的js");

    在此肯定会有很多人告诉我,我是这样写的,但是我的js根本就不执行。其实不然,我看到过很多要我解决类是问题的人,发给我看的代码。假如tabs_href_test.html是他们引入的外部界面,都会是如下这样的一个完整的结构

    复制代码
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tabs - jQuery EasyUI Demo</title>
      <script type="text/javascript" src="test.js"></script>
      <script>alert("我是外部加载的html片段");</script>
    </head>
    <body>
      <div><p>我是外部加载的html片段</p></div>
    </body>
    </html>
    复制代码
     

    他 们都会问他们的js为什么不会执行。其实问题就在这里tabs_href_test.html界面最终其实是jq通过ajax请求过来内容,在 append到目标区域。而通过ajax请求方法的responseText又只会抓去完整html片段中<body>里面的内容。正好他们 把他们的js写在了body外面所以导致js没执行。正确的写法是在引入的界面当中不要出 现<html><head><body>三个标签。因为这只是一个片段,你加载这一个片段只是为了动态嵌入到主界面 当中某一个部分显示出来,不是一个完整的页面。

    最后总结如果你应该用了easyui中加载外部界面的组件,例如:panel,window,dailog,tabs等。请确保你引入的界面是一个 html片段。html片段正确的写法再次提醒不要出现<html><head><body>三个标签:

    <script type="text/javascript" src="test.js"></script>
    <link ref="css"/>
    <style>还可以写点样式</style>
    <script>alert("我是外部加载的html片段");</script>
    <div><p>我是外部加载的html片段</p></div>
  • 相关阅读:
    rem是如何实现自适应中的?
    meta基础知识
    JqueryMobile动态生成listView并实现刷新的两种方法
    javascript中for/in循环及使用技巧
    JavaScript中this详解
    使用css实现全兼容tooltip提示框
    如何使用CSS3画出一个叮当猫
    jQuery实现的Div窗口震动效果实例
    jQuery实现动态添加和删除一个div
    js对文章内容进行分页示例代码
  • 原文地址:https://www.cnblogs.com/snowhite/p/9945558.html
Copyright © 2020-2023  润新知