如何将自己写的js注入到网站网页中

如何将自己写的js注入到网站网页中,第1张

首先你要确认你的是js码,只有js代码才能被调用。将写好的js代码复制到txt文件中,另存为.js文件,保存在你的网站目录下。我保存在桌面上。(注在网页上调用一定要保存在网页上)保存好了之后,我的桌面就有一个新建.js的介绍文件,现在看看效果吧。随便新建一个网页,在<body></body>(注我演示的没有body,是最简单的网页)之间插入<script language="javascript" src="js文件地址"></script>,我的是放在桌面上的,所以地址是下面的这个保存为html文件之后,打开来看看效果吧。如上图所示,在网页的源文件里面,显示的不是<input type=button name="Submit1" value="郭强" size=10 class=s02style="background-color:rgb(235,207,22)">而是这段代码转换成js后js文件所在的位置。

在java Web体系中,可以写自定义标签,过滤用户输入,也可以写一个filter过滤器。比如说自定义标签。

开发步骤:

1 写一个标签处理类

2  在/WEB-INF/目录下,写一个*.tld文件,目的是让Web容器知道自定义标签和标签处理类的对应关系

3 在JSP页面中,通过<%@taglib%>指令引用标签库.

4 部署web应用,访问simple.jsp即可

其中,标签处理类可以这样写,转义大于号,小于号等特殊符号。

package cn.itcast.web.jsp.tag

import java.io.IOException

import java.io.StringWriter

import javax.servlet.jsp.JspException

import javax.servlet.jsp.PageContext

import javax.servlet.jsp.tagext.JspFragment

import javax.servlet.jsp.tagext.SimpleTagSupport

//<simple:filter>标签处理类

public class FilterTag extends SimpleTagSupport {

public void doTag() throws JspException, IOException {

JspFragment jspFragment = this.getJspBody()

StringWriter writer = new StringWriter()

jspFragment.invoke(writer)

String temp = writer.getBuffer().toString()

//结果必定是转义后的字符串

temp = filter(temp)

PageContext pageContext = (PageContext) this.getJspContext()

pageContext.getOut().write(temp)

}

public String filter(String message) {

        if (message == null)

            return (null)

        char content[] = new char[message.length()]

        message.getChars(0, message.length(), content, 0)

        StringBuffer result = new StringBuffer(content.length + 50)

        for (int i = 0 i < content.length i++) {

            switch (content[i]) {

            case '<':

                result.append("&lt")

                break

            case '>':

                result.append("&gt")

                break

            case '&':

                result.append("&amp")

                break

            case '"':

                result.append("&quot")

                break

            default:

                result.append(content[i])

            }

        }

        return (result.toString())

    }

}

答案是不要这么搞,大段的 HTML 嵌入到 JS 里结果就是悲剧。不能代码高亮不能自动缩进,太难维护了。

我的经验是,直接把 HTML 单独写到一个浏览器能访问到的文件里,比如 template/foo.html。然后 JS 里发一个同步 XHR 请求去读这个文件,例如:

var html = Template.load('/template/foo.html')

var target = document.getElementById('xxx')

target.innerHTML = html

Template 是一个工具类,负责发送同步 XHR 请求并返回结果。

这样在开发的时候,模板文件和 JS 代码分离,非常好维护。

当然这样做的话,上线的时候总发 XHR 请求也不是办法。所以在打包 JS 之前,我一般会通过脚本把所有的 Template.load('.*') 提取出来,替换成对应 HTML 的内容。这样在开发时非常方便,上线时也没有性能问题。

比如上面的代码被打包工具跑一下就变成了:

var html = "<ol>\n<li class=\"xxx\">...</li>\n</ol>"// 引号里是 /template/foo.html 对引号、换行做了转义之后的内容,由工具自动生成

var target = document.getElementById('xxx')

target.innerHTML = html


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6159246.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表(0条)

保存