iframe的控制

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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容