js 的document.createElement(img)问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 的document.createElement(img)问题相关的知识,希望对你有一定的参考价值。

我想读取img文件夹编号1-6的图片,但是加载不上去,怎么回事?
<html>
<head>
<title>test</title>
<script type="text/javascript">
function show()
var a=new Array();
var i=1;
for(i=1;i<=6;i++)
a[i]="img/"+i.toString()+".jpg";


var ima=new Array();

for(i=1;i<=6;i++)
var image=document.getElementById("image");
ima[i]=document.createElement('img');
ima[i].src=a;
image.appendChild(ima[i]);
alert(b);

</script>
</head>
<body onLoad="javascript:show()">
<div id="image">
</div>
</body>
</html>

参考技术A <script type="text/javascript">/*<script defer type="text/javascript">,defer确保页面加载完成才加载js脚本。*/
ima[i].src=a;//ima[i].src=a[i]
function缺少结尾

<html>
<head>
<title>test</title>
<script type="text/javascript">
function show()
var a = new Array();
var i = 1;
for (i = 1; i <= 6; i++)
a[i] = "img/" + i.toString() + ".gif";

var ima = new Array();
for (i = 1; i <= 6; i++)
var image = document.getElementById("image");
ima[i] = document.createElement('img');
ima[i].src = a[i];
image.appendChild(ima[i]);


</script>
</head>
<body onload="javascript:show()">
<div id="image">
</div>
</body>
</html>本回答被提问者采纳
参考技术B 跟踪一下啊。 我看你这个名字估计是不是1-6这里出错了。-被识别成运算符了。 参考技术C 如下修改:<html>
<head>
<title>test</title>
<script type="text/javascript">
function show()
var a=new Array();
var i=1;
for(i=1;i<=6;i++)
a[i]="img/"+i.toString()+".jpg";


var ima=new Array();

for(i=1;i<=6;i++)
var image=document.getElementById("image");
ima[i]=document.createElement('img');
ima[i].src=a;
image.appendChild(ima[i]);



</script>
</head>
<body onLoad="javascript:show()">
<div id="image">
</div>
</body>
</html>

谈CSRF与JSONP设置header问题

关于前端发起请求

问题一 JS发起请求的方式

方法一
JS代码中发起请求的方式普遍为AJAX

该技术在 1998 年前后得到了应用。允许客户端脚本发送HTTP请求(XMLHTTP)

方法二
script标签请求

方法三
通过HTML的方法
通过js自动在jsp中创建一个form表单,并给其method属性为post

function post(URL, PARAMS)         
    var temp = document.createElement("form");        
    temp.action = URL;        
    temp.method = "post";        
    temp.style.display = "none";        
    for (var x in PARAMS)         
        var opt = document.createElement("textarea");        
        opt.name = x;        
        opt.value = PARAMS[x];               
        temp.appendChild(opt);        
            
    document.body.appendChild(temp);        
    temp.submit();        
    return temp;        
        

$(".submit_d a").click(function()
    var data = ($(this).attr("class")).split("-");
    var series = data[0];
    var discharge = data[1];
    var carriageNum = data[2];
    var seatNum = data[3];
    var gear = data[4];
    var cost = data[5];
    var pictureUrl = data[6];
    var id = data[7];
    post(ctx+"/order/rentcar.action","series":series,"discharge":discharge,"carriageNum":carriageNum,"seatNum":seatNum,"gear":gear,"cost":cost,"pictureUrl":pictureUrl,"id":id);
);

问题二 设置header、cookie

CSRF发起的请求可以设置cookie(token)、header么

CSRF或者jsonp,利用时需要跨域。

跨域首先排除掉AJAX方法

AJAX如何跨域

  1. CORS
    简单来说,请求时浏览器检测到跨域,会带上Origin,得到服务器的准许后才能够获取数据。
    CORS不仅设置了AJAX跨域时的域名,还有请求方法、返回Header获取字段、允许发送cookie等
    浏览器同源政策及其规避方法(阮一峰)
    CORS需要大多数情况下,前端是无感知的,这是后端服务器做的部分。
  2. JSONP
    JSONP能够跨域的原因在于 标签允许跨域。
    通过script拿到数据,形如
    将会返回 foo(data)打在前端
    前端再定义function foo(),返回前端时就直接调用并传入数据。
    缺点:
    限于GET方法
    一样无法自定义设置header和cookie。
  3. 代理
    本地设置代理,ajax请求本地代理,再由本地通过非ajax方法去请求数据,返回给前端。不考虑。但是在某些情况下可以用,比如payload中需要拼接由跨域获取的数据。

这三种方法都是JS/AJAX跨域的方法。
在CSRF/JSONP劫持的运用上,CORS跨域被限制的情况下不存在了,因此AJAX的GET/POST一堆灵活操作没法用。
JSONP也无法设置header、cookie等。

FORM表单请求的方式当然也没法设置header。

结论 CSRF/JSONP劫持中所用请求难以自定义header、cookie

以上是关于js 的document.createElement(img)问题的主要内容,如果未能解决你的问题,请参考以下文章

谈CSRF与JSONP设置header问题

Chrome-Devtools代码片段中的多个JS库

vue $mount挂载实例方法

vue $mount挂载实例方法

带描边的 SVG 蒙版

svg 学习笔记