这篇文章涉及到两个问题
1.将服务器返回的内容写入页面
2.在angular2中使用iframe,加载页面
一.将服务器返回的内容写入页面
参考:http://blog.csdn.net/gubenpeiyuan/article/details/53364135
1.首先引入file
//在demo-page.ts中声明File
import {File} from "@ionic-native/file" ;
@Component({
selector: 'demo-page',
templateUrl: 'demo-page.html',
providers: [File]
})
export class DemoPage {
constructor(private file: File) {}
}
2.创建一个文件
//demo-page.ts
this.fileUrl = this.file.externalCacheDirectory;
let fe = await this.file.createFile(this.fileUrl, "demoTest.html", true);
3.文件写入
this.writeFile(fe, this.content);
writeFile(fileEntry, data) {
fileEntry.createWriter((fileWriter) => {
fileWriter.onwriteend = () => {
console.log("success file write: " + e.toString());
};
fileWriter.onerror = function (e) {
console.log("Failed file write: " + e.toString());
};
// If data object is not passed in,
// create a new Blob instead.
let dataObj = new Blob([data], {type: 'text/plain'});
fileWriter.write(dataObj);
});
}
二.在angular2中使用iframe
//demo.html
<ion-header>
<ion-navbar>
<ion-title>使用iframe</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-card>
<iframe [src]="iframe">
</iframe>
</ion-card>
</ion-content>
//demo.ts
this.fileUrl = this.file.externalCacheDirectory;
let iframe= this.fileUrl + "demoTest.html";
以上代码运行的时候,会出现以下类似错误(xss)
解决方法参考: https://segmentfault.com/a/1190000008809095
1.什么是xss攻击
2.解决方法
我们需要Angular 2 中提供的 DomSanitizer 服务来告诉angular iframe中链接的url是安全的
import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
writeFile(fileEntry, data) {
fileEntry.createWriter((fileWriter) => {
fileWriter.onwriteend = () => {
//假如写入成功,将被处理过的安全的文件地址传给iframe,加时间戳,使iframe内容自动更新
this.iframe = this.domSanitizer.bypassSecurityTrustResourceUrl(this.resultFile + "?dummyVar=" + (new Date()).getTime());
};
fileWriter.onerror = function (e) {
console.log("Failed file write: " + e.toString());
};
// If data object is not passed in,
// create a new Blob instead.
let dataObj = new Blob([data], {type: 'text/plain'});
fileWriter.write(dataObj);
});
}