angular-使用iframe做独立页(iframe传值到angular和iframe里请求后台数据)

这个方法使用过两次。一次是在项目中嵌入一个表达式生成器。因为用别人做好的网页变成组件很难,而且里面用了jq,与angular思想相反不能用。另一次是因为想要单独引用样式。而innerHTML使用的样式放在组件css里不生效。放在assets里又影响全局样式。所以使用iframe。

第一种是在iframe页中获取我需要的值传回angular页。另一种是将后台请求参数传向iframe页。在iframe引用的页中请求并返回后台数据用innerHTML展示。

两种都先链接到iframe并传参。首先iframe引用的网页要放在assets资源文件夹里。才能够通过路径访问。首先把要引用网站的html,css放在资源文件夹里。

其次,在angular组件中用路径链接到网页。并根据需要传参数。angular中默认这路径是不安全的。我们需要DomSanitizer告诉它这是个安全路径。如果没使用会报一个提示不安全路径错吧。现在错误我懒得重现。注意的是用innerHTML引用样式时也用类似的方法。直接截图方法。

ts文件方法

HTML里的 写法:

这样链接已经完成了。链接的页要接受参数是怎么做呢,直接上代码,粘贴这串代码就可以获取传过来的所有参数,拿到对应参数格式是Request['参数名']

function request(url) {
var url = location.search;
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}

var Request = new Object();
Request = request();
alert(Request['url'], Request['token'], Request['queuename']); //拿到对应的参数Request['参数名'](这里和上面的传参是两个页。不对应)
 
 第一种:从iframe页里传数据到angular页。
 
 

 第二种:

拿到参数后请求后台数据,并使angular里的父容器自适应iframe里网页长度的方法是

猜你喜欢

转载自www.cnblogs.com/y543004756/p/9779616.html
今日推荐