iframe 大数据量传参 本地能调用远程页面 不存在跨域问题 js组件调用原理

不说废话 先上代码

index.html (调用页面)

<SCRIPT type=text/javascript>
var liArr003 = "";
	liArr003 += "<li><a href=''><img src='http://domain/images/weibo/201204/1thumbs.jpg' data-large='http://domain/images/weibo/201204/1.jpg' alt='image01' /></a></li>";

	document.write('<iframe name="'+liArr003+'" src="http://localhost/iframe.html" width="100" height="100"></iframe>');
</SCRIPT>

 iframe.html (js组件页面)

<script>
alert(window.name);
</script>

 以上就是最后使用的代码

 

需求：为什么找这个代码？

一直以来，在页面里经常会用到幻灯或者是一些其他组件，但是一个前端的js组件往往由3部分组成，css部分、javascript部分，html部分。这样页面组件一多起来就容易出现css冲突或者是js冲突，而且使用起来相对普通编辑来讲就非常不方便了。而iframe的src地址是有长度限制，而且想用js去操控iframe，在本地操作的时候还会产生跨域的问题，页面呈现上不能显示和预览，非常的不方便。之前一直研究页面的get方式，但是这个方法有字符长度限制，如果超过一定字符，比如ie等浏览器就不支持了。然后又在跨域的方面研究了很长时间也是未果。

目的：在制作页面中把参数写好，js的iframe组件读取这些数据，把数据展现出来，比方说焦点图。

 

灵感来源：是看到了iframe自适应高度的一篇文章，里面讲的是跨域，本也想按照其思路，编写一个函数，但是看到核心内容就是window.name，这不就是标签中的name属性吗？所以还写什么js脚本，直接在iframe里面name标签里把数据写上就好了。

 

实际上就是 ： <iframe name="data" src="http://localhost/iframe.html" width="100" height="100"></iframe>

然后在iframe页面里面调用window.name 数据就出现了。这里的数据最大应该能达到3M左右，完全够使用了。

 

如果是跨域调用的话，可以加一些区别 比如

<script>
try{window.parent.document.domain}catch(e){alert("err")}
</script>

最后小结：

明明一个属性解决的问题研究了一天，也是惭愧之极。但是探求真理的思路还是非常珍贵的。总算是又了却了一桩心事。