Question

我正在尝试在我的Angular项目上实施Google即时预览。但是，当我使用iframe标记时，它什么也没显示。

html代码 -

<div class="text-result" *ngIf="Display('all')">
                <div *ngFor="let item of items$|async" class="result">
                    <div class="title">
                        <a href="{{item.link}}">{{item.title}}</a>
                        <div class="box">
                            <iframe src="{{item.link}}" width="500px" height="500px"></iframe>
                        </div>
                    </div>
                    <div class="link">
                        <p>{{item.link}}</p>
                    </div>
                    <div>
                        {{item.pubDate|date:'fullDate'}}
                    </div>
                </div>
            </div>

css代码 -

.box{
    display: none;
    width: 100%;
}

a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
}

Answer 1

为了避免XSS攻击，angular不允许动态绑定到iframe的src属性。您可以使用DomSanitizer类来允许网址。您需要注入DomSanitizer并使用bypassSecurityTrustResourceUrl方法。

constructor(domsanitizer: DomSanitizer) {
    let url = "http://some-random-url.tld";
    this.myUrl = this.domsanitizer.bypassSecurityTrustResourceUrl(url);
}

并在您的模板中：

<iframe [src]="myUrl"></iframe>

Angular2 - 我应该如何使用Angular2实现Google即时预览？

1 个答案: