angular中iframe

在Angular中使用iframe有几种方法。一种是通过在模板中直接使用iframe标签，设置src属性来加载网页。例如，你可以在模板中使用以下代码来创建一个iframe元素：

<iframe [src]="iframeUrl" class="Iframe" width="300px" height="500px" style="padding: 0" scrolling="no" frameborder="0">
<p>当前浏览器不支持iframe</p>
</iframe>

在这个例子中，iframeUrl是一个在组件中定义的变量，用来指定要加载的网页的URL。

另一种方法是使用ViewChild指令来获取到iframe元素的引用，然后通过修改它的src属性来加载网页。例如，你可以在组件的HTML模板中添加以下代码：

<iframe #frame class="frame" [src]="srcUrl" width="100%" frameborder="0">
</iframe>

然后，在组件的代码中，你可以使用ViewChild指令来获取到iframe元素的引用，并在需要的时候修改它的src属性。例如，你可以在组件类中添加以下代码：

@ViewChild('frame') frame: ElementRef;

然后，在需要修改iframe的地方，你可以使用以下代码来修改src属性：

this.frame.nativeElement.src = newUrl;

这样就可以通过iframe在Angular中加载网页了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [angular-through-iframe:如何通过 iframe 使用 angular.js](https://download.csdn.net/download/weixin_42127783/19261318)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [angular中iframe的使用](https://blog.csdn.net/Fat_Shady_/article/details/119326333)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [angular中跨域设置iframe自适应高度，去滚动条。](https://blog.csdn.net/ITronger/article/details/127907056)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]