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里网页长度的方法是

转载于:https://www.cnblogs.com/y543004756/p/9779616.html