1.获取到网页内容,显示到iframe中。
const resp = await fetch(this._url);//获取网页内容
let htmlContent = await resp.text();//得到内容
const baseurl = this._url.substring(0, this._url.lastIndexOf('/') + 1);
htmlContent = Utility.changeHtmlImageSrcUrl(htmlContent, baseurl);//改写图片的url为全地址
this._frame.nativeElement.onload = () => {
this._frame.nativeElement.contentWindow.document.documentElement.innerHTML = htmlContent;//让url的内容显示出来。
}
2.改变url:
static changeHtmlImageSrcUrl(html: string, url: string): string {
let newh = '';
let h = html;
let i = 0;
while (i >= 0 && i < h.length) {
let starti = i;
i = h.indexOf('<img', i);
if (i > 0) {
let substr = h.substring(starti, i);
newh = newh + substr;
starti = i;
i = h.indexOf('src="', i);
if (i > 0) {
substr = h.substring(starti, i);
newh = newh + substr + 'src="';
i += 5;
starti = i;
i = h.indexOf('"', i);
if (i > 0) {
i += 1;
substr = h.substring(starti, i);
if (substr.startsWith("http") || substr.startsWith("data:")) {
newh = newh + substr;
}
else {
newh = newh + url + substr;
}
}
}
} else {
if (starti < h.length) {
let substr = h.substring(starti, h.length - 1);
newh = newh + substr;
}
}
}
return newh;
}
3.其他控制代码:
test() {//获取高度
setTimeout(() => {
console.log(this._frame.nativeElement.contentWindow.document.body.scrollHeight);
}, 1500);
}
go() {//滚动iframe
this._frame.nativeElement.contentWindow.scroll(0,this._frame.nativeElement.contentWindow.document.body.scrollHeight);
}
4.html的代码,很简单:
<iframe #frame [width]="width" [height]="height" style="transition: all 0.3s; background: white;" frameborder="0"
allowfullscreen (load)="test()" id="__rserver_html_result"></iframe>
<div style="text-align:center">
<button (click)="close()" class="vs-cancel-button" style="min-width:126px; margin:5px">{{'GLOBAL.CLOSE' | translate}}</button>
<button (click)="go()">asddasd</button>
</div>