首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript:当我从iframe函数传递数组时,数组会失去他的类型!

在JavaScript中,当您从iframe函数传递数组时,数组可能会失去其类型。这是因为在将数组传递给iframe时,数组会被转换为字符串。要解决这个问题,您可以在传递数组之前将其转换为JSON字符串,然后在iframe中将其解析回数组。

以下是一个示例:

  1. 在父页面中,将数组转换为JSON字符串:
代码语言:javascript
复制
var myArray = [1, 2, 3];
var jsonString = JSON.stringify(myArray);
  1. 将JSON字符串传递给iframe函数:
代码语言:javascript
复制
// 假设您已经获取了iframe的window对象
var iframeWindow = document.getElementById('myIframe').contentWindow;

// 将JSON字符串传递给iframe函数
iframeWindow.postMessage(jsonString, '*');
  1. 在iframe中,将JSON字符串解析回数组:
代码语言:javascript
复制
// 在iframe中监听message事件
window.addEventListener('message', function(event) {
  var jsonString = event.data;
  var myArray = JSON.parse(jsonString);

  // 现在您可以在iframe中使用myArray了
});

这样,您就可以在iframe中使用原始数组类型,而不会丢失其类型。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

rust 上手很难?搞懂这些知识,前端开发能快速成为 rust 高手

这篇文章,就是专门为想要学习 rust 前端开发而写,为大家抛开 rust 迷雾,让大家感受到,上手 rust,其实没有那么难。本质上来说,JavaScript 是非常相似的。...根据我们刚才那个规定,b = a 是将其值所有权,转移给了 b,所以此时变量 a 失去了值。当我们再次想要通过变量 a 访问对应,自然就会出错。...因此最终 a 值不受到函数执行影响。这里表现与 JS 一模一样。 其次,在 JavaScript引用数据类型,总是按引用访问/传递。...因为 rust 是默认按值传递,因此当我们将一个复合类型传入函数,实际上是把值传进入,这样就会发生所有权转移。 例如我声明一个简单函数,然后只是在函数内部访问传入值。...("bookxxxx: {}", bk.author); } 然后执行该函数当我们将 book 传入函数之后,再访问 book,就会发现报错,明确告诉我们 book 已经失去所有权了。

1.2K20

聊聊 Array 中一个小坑

Array 类型检测 ? 假设obj是一个数组,我们想要实现一些功能。比如JSON.stringify就是一个例子,它以不同方式把数组输出到其他对象。 我们可以这样做: ?...但是对于数组子类来说这是错误: ? 所以如果你想检查子类类型,那么应该用instanceof: ?...但是当引入多个realm,事情将会变得更加复杂: Multiple realms realm包含self引用JavaScript全局对象。...iframe有自己数组构造函数,它与父页面中构造函数不同。 Array.isArray ? Array.isArray将为数组返回true,即使它们是在另一个realm中创建。...创建自己 'is' 函数 如果我们想要创建我们自己“is”函数并跨越realm怎么样? 好吧,Symbol允许我们这样做: ?

43630
  • JavaWeb day3 JavsScript 入门

    而在JavaScript 是一门弱类型语言,变量==可以存放不同类型值==;如下在定义变量赋值为数字数据,还可以将变量值改为字符串类型数 var test = 20; test = "张三";...上述讲解 == 运算符,发现进行类型转换,所以接下来我们来详细讲解一下 JavaScript类型转换。...:== JS中,函数调用可以传递任意个数参数 例如 let result = add(1,2,3); 它是将数据 1 传递给了变量a,将数据 2 传递给了变量 b,而数据 3 没有变量接收。...数组长度是可以变化,而 JavaScript 是弱类型,所以可以存储任意类型数据。...trim() 函数在以后开发中还是比较常用,例如下图所示是登陆界面 图片 用户在输入用户名和密码,可能习惯输入一些空格,这样在我们后端程序中判断用户名和密码是否正确,结果肯定是失败。

    7.5K10

    JavaWeb day3 JavaScript入门

    而在JavaScript 是一门弱类型语言,变量可以存放不同类型值;如下在定义变量赋值为数字数据,还可以将变量值改为字符串类型数 var test = 20; test = "张三"; js 中变量名命名也有如下规则...(age1 === age2);// false 3.5.2 类型转换 上述讲解 == 运算符,发现进行类型转换,所以接下来我们来详细讲解一下 JavaScript类型转换。...JS中,函数调用可以传递任意个数参数 例如 let result = add(1,2,3); 它是将数据 1 传递给了变量a,将数据 2 传递给了变量 b,而数据 3 没有变量接收。...数组长度是可以变化,而 JavaScript 是弱类型,所以可以存储任意类型数据。...trim() 函数在以后开发中还是比较常用,例如下图所示是登陆界面 用户在输入用户名和密码,可能习惯输入一些空格,这样在我们后端程序中判断用户名和密码是否正确,结果肯定是失败。

    7.4K20

    174道JavaScript 面试知识点总结(上)

    当我们对两种类型使用 typeof 进行判断时候,Null 类型返回 “object”,这是一个历史遗留问题。...特点: JavaScript 对象是通过引用来传递,我们创建每个新对象实体中并没有一份属于自己原型副本。当我们修改原型,与 之相关对象也继承这一改变。...Symbol 值强制类型转换? ES6 允许符号到字符串显式强制类型转换,然而隐式强制类型转换产生错误。...call 方法接收参数,第一个是 this 绑定对象,后面的其余参数是传入函数执行参数。也就是说,在使用 call() 方法传递函数参数必须逐个列举出来。...当我后端接收到 JSON 格式字符串,我们可以通过这个方法来将其解析为一个 js 数据结构,以此来进行数据访问。

    1.4K41

    前端基础知识整理汇总(上)

    执行上下文栈 执行上下文可以理解为当前代码执行环境,JavaScript运行环境大概包括三种情况: 全局环境:JavaScript代码运行起来会首先进入该环境 函数环境:当函数被调用执行时,进入当前函数中执行代码...无论什么时候在函数中访问一个变量,就会作用域链中搜索具有相同名字变量,一般来讲,当函数执行完毕,局部活动对象就会被销毁,内存中仅保存全部作用域活动对象。但是,闭包不同。...apply(thisObj, argArray)接收两个参数,thisObj是函数运行作用域(this),argArray是参数数组数组每一项是你希望传递函数参数。...最后,立刻执行函数。 call():将 this 值准确设置到你选择一个对象上。然后像bind 一样通过逗号分隔传递多个参数给函数。...纯函数也可以被看作成值并用作数据使用 常量和变量中引用它。 将其作为参数传递给其他函数。 作为其他函数结果返回它。 其思想是将函数视为值,并将函数作为数据传递

    1.3K10

    40道+JavaScript基础面试题(附答案)

    5、 JavaScript有几种类型值?你能画一下他们内存图吗? 基本数据类型存储在栈中,引用数据类型(对象)存储在堆中,指针放在栈中。...当解释器寻找引用值,会首先检索其在栈中地址,取得地址后堆中获得实体。 6、 栈和堆区别?...(当前被传递元素); index(当前被传递元素索引); array(调用map方法数组) parseInt方法接收两个参数 第三个参数["1", "2", "3"]将被忽略。...两个函数: JSON.parse(str) 解析JSON字符串 把JSON字符串变成JavaScript值或对象 JSON.stringify(obj) 将一个JavaScript值(对象或者数组)转换为一个...在使用call()方法传递函数参数必须逐个列举出来。使用apply()传递函数是参数数组

    1.1K10

    滴滴前端二面高频面试题合集

    当一个资源与该资源本身所在服务器不同域、协议或端口请求一个资源,资源会发起一个跨域HTTP 请求。CORS需要浏览器和服务器同时支持,整个CORS过程都是浏览器完成,无需用户参与。...,且是为数不多可以跨域操作window属性之一,它可用于解决以下方面的问题:页面和其打开新窗口数据传递多窗口之间消息传递页面与嵌套iframe消息传递上面三个场景跨域数据传递用法:postMessage...;通过iframesrc属性由外域转向本地域,跨域数据即由iframewindow.name外域传递到本地域。这个就巧妙地绕过了浏览器跨域访问限制,但同时它又是安全操作。....'); });});事件循环机制 (Event Loop)事件循环机制整体上告诉了我们 JavaScript 代码执行顺序 Event Loop即事件循环,是指浏览器或Node一种解决javaScript...两个条件都成立,所以执行条件中代码, f 在定义是没有使用var,所以是一个全局变量。因此,这里会通过闭包访问到外部变量 f, 重新赋值,现在执行 f 函数返回值已经成为 false 了。

    1.1K50

    174道JavaScript 面试知识点总结(上)

    当我们对两种类型使用 typeof 进行判断时候,Null 类型返回 “object”,这是一个历史遗留问题。...特点: JavaScript 对象是通过引用来传递,我们创建每个新对象实体中并没有一份属于自己原型副本。当我们修改原型,与 之相关对象也继承这一改变。...|| 和 && 返回它们其中一个操作数值,而非条件判断结果 27、Symbol 值强制类型转换? ES6 允许符号到字符串显式强制类型转换,然而隐式强制类型转换产生错误。...(2)第二种方式是使用借用构造函数方式,这种方式是通过在子类型函数中调用超类型构造函数来实现,这一种方法解决了不能向超类型传递参数缺点,但是它存在一个问题就是无法实现函数方法复用,并且超类型原型定义方法子类型也没有办法访问到...当我后端接收到 JSON 格式字符串,我们可以通过这个方法来将其解析为一个 js 数据结构,以此来进行数据访问。

    1.7K10

    zepto 基础知识(1)

    遍历数组元素或者以key-value 值对方式遍历对象。回调换上返回false 停止遍历。     ...类型array     获取一个新数组,新数组只包含回调函数中返回true 数组项     $.grep([1,2,3],function(item){       return item...;boolean   如果object 参数是否为yige window 对象,那么返回true.这在处理iframe 非常有用,因为每个iframe都有自己window对象,   使用常规方法...类型 collection   通过遍历集合中元素,返回通过迭代函数全部结果,null和undefined 将被过滤掉。   ....type(object) 类型:string   获取JavaScript 对象类型,可能类型有:null undefined boolean number string function

    1.1K80

    【JS】JavaScript 基础入门

    开始 str.substring(1)//第一个字符串截取到最后一个字符串 str.substring(1,3)//[1,3)   数组 Array 可以包含任意数据类型, var arr...,只是返回一个新数组, 连接符 join() 多维数组 数组:存储数据(如何存,如何取,方法都可以自己实现!)...中,函数查找变量自身函数开始, 由“内”向“外”查找,假设外部存在这个同名函数变量,则内部函数屏蔽外部函数变量。...类:模板, 对象:具体实例, 面向对象原型继承 原型对象 当创建一个新函数,系统根据一组特定规则为函数创建一个 prototype 属性,该属性会指向一个名为原型对象对象,在默认情况下,该对象自动生成一个构造函数...通俗来讲就是,当我们新建一个函数A函数A内部会有一个属性,该属性指向一个对象(名字叫原型对象),而这个对象里面默认有一个构造函数,这个构造函数指向我们最初新建函数A。

    26430

    前端面试题---JS部分

    当我们把对象值赋值给另外一个变量,复制是对象指针,指向同一块内存地址,意思是,变量中保存实际上只是一个指针,这个指针指向内存堆中实际值,数组 对象 堆(heap)和栈(stack)有什么区别存储机制...数组中截取,如果不传参,返回原数组。...15、filter( ):对数组每一运行给定函数返回满足该函数项组成数组。 16、every( ):当数组中每一个元素在callback上被返回true就返回true。...arguments 当我们不知道有多少个参数传进来时候就用 arguments 来接收,是一个类似于数组对象,有length属性,可以arguments[ i ]来访问对象中元素, 但是它不能用数组一些方法...也可以是 symbol 类型,symbol 可以保证不与其他属性名冲突,减少了bug产生, 如果那 symbol 对比的话 就是返回 false symbol 是一个原始类型值就,不可以使用

    75620

    分享 100 道基础前端面试题(附答案)

    当我们对两种类型使用 typeof 进行判断时候,Null 类型返回 “object”,这是一个历史遗留问题。...特点: JavaScript 对象是通过引用来传递,我们创建每个新对象实体中并没有一份属于自己原型副本。当我们修改原型,与 之相关对象也继承这一改变。...Symbol 值强制类型转换? ES6 允许符号到字符串显式强制类型转换,然而隐式强制类型转换产生错误。...(2)第二种方式是使用借用构造函数方式,这种方式是通过在子类型函数中调用超类型构造函数来实现,这一种方法解决了不能向超类型传递参数缺点,但是它存在一个问题就是无法实现函数方法复用,并且超类型原型定义方法子类型也没有办法访问到...当我后端接收到 JSON 格式字符串,我们可以通过这个方法来将其解析为一个 js 数据结构,以此来进行数据访问。

    4.3K60

    百度前端一面常见面试题(附答案)

    ;通过iframesrc属性由外域转向本地域,跨域数据即由iframewindow.name外域传递到本地域。这个就巧妙地绕过了浏览器跨域访问限制,但同时它又是安全操作。...在解析过程中,还会为函数生成预编译代码。在预编译统计声明了哪些变量、创建了哪些函数,并对函数代码进行压缩,去除注释、不必要空白等。...总结:解析和预编译过程中声明提升可以提高性能,让函数可以在执行时预先为变量分配栈空间声明提升还可以提高JS代码容错性,使一些不规范代码也可以正常执行变量提升虽然有一些优点,但是造成一定问题...如果函数返回一个对象,那么new 这个函数调用返回这个函数返回对象,否则返回 new 创建新对象对对象与数组解构理解解构是 ES6 提供一种新提取数据模式,这种模式能够对象或数组里有针对性地拿到想要数值...1)数组解构 在解构数组,以元素位置为匹配条件来提取想要数据:const [a, b, c] = [1, 2, 3]最终,a、b、c分别被赋予了数组第0、1、2个索引位值: 数组0、1

    95430

    求职 | 史上最全web前端面试题汇总及答案2

    而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用文档类型。 19、iframe有哪些缺点?...①iframe阻塞主页面的Onload事件,搜索引擎检索程序无法解读这种页面,不利于SEO; ②iframe和主页面共享连接池,而浏览器对相同域连接有限制,所以影响页面的并行加载。...相同点:都是判定两个值是否相等 不同点:==不会判断类型,而===判断类型 5、如何判断一个变量值是否为数字?以及有哪些手段判断变量值数据类型?...我们举例说明:比如一个黑客程序,利用Iframe把真正银行登录页面嵌到他页面上,当你使用真实用户名,密码登录页面就可以通过Javascript读取到你表单中input中内容,这样用户名...渐进增强:被所有浏览器支持基本功能开始,逐步地添加那些只有新式浏览器才支持功能,向页面增加无害于基础浏览器额外样式和功能。当浏览器支持,它们自动地呈现出来并发挥作用。

    6.1K20

    爬虫不得不学之 JavaScript 函数对象篇

    获取数组元素也是一样通过下标获取,下标 0 开始,而且 JavaScript 数组可以随意根据下标进行赋值,不管你数组长度,因为 JavaScript 数组长度是动态。 ?...函数 当我们需要在对多个数组进行上面的其中练习之一,比如进行寻找最大值,我们总不能每个数组都各自写一段寻找最大值代码,否则这样子的话代码复用性太低了。...这个时候就需要我们函数参数了,函数参数就是解决这个不确定数据内容当我们需要对不确定数据内容进行操作,只需要在调用函数时候把数据内容当作参数传进去即可。 函数参数定义与调用语法: ?...2.4 函数内部 arguments 对象 JavaScript 中,函数内部都有一个 arguments 对象,用来记录在调用函数所传进来参数,可以说是一个伪数组。 ? ?...2.6 函数其他 函数也是一种数据类型,可以说是一个对象吧,至于具体后面再详讲,现在了解就好。 ? 函数不仅可以作为参数进行传递,还可以作为返回值,毕竟函数也是一种数据类型

    62330

    双向绑定与单向数据流之争,Solid取代React吗

    这种解决方案所花费成本主要体现在对数据处理上 面临两个问题 一是数据变化需要监听,但是某些数据类型监听在实现上有难度 以数组为例,在以前 vue 版本中,Object.defineProperty...,而是让解决擅长事情 5 小痛点 在使用 vue ,我们常常需要警惕对数据进行一些操作,让数据失去响应性。...,但好在实践项目中单独把基础数据类型作为响应式数据场景非常少 也就是说,在解决这个问题上,反而 vue3 比 solid 更加优雅,当然,即便如此,在 vue3 中,一些操作也让数据失去响应性,例如解构...然而事实上,闭包问题不是 react 问题,而是 JavaScript 本身特性,闭包是学习 JavaScript 本应该掌握好基础之一,只不过很多前端开发没有做到而已 新人朋友估计在面试,也常常被闭包相关面试题虐哭...只是满足了部分前端开发对于双向绑定 + 函数美好愿景而已,至于 vue 和 angular 最终都会采用 Signal 重构底层代码,那只不过是因为他们本身从一开始就是双向绑定基因 因此在做技术选型

    33510
    领券