HTML5如何在页内显示另外的页面

要在页内显示另外的页面，此时我们就需要用到 HTML 中的一些框架，比如 或 或者其他的框架，我们以 iframe 为例说明

HTML 中的 元素是一个内联框架，允许你在一个 HTML 文档中嵌入另一个 HTML 文档。常用于在当前页面中嵌入其他网页、视频、广告、交互式应用程序等。

• src 属性指定了要嵌入的文档的 URL。
• width 和 height 属性分别定义了 的宽度和高度，你可以使用像素值（如200px）或百分比（如100%）来设置。

注意事项

1. 跨域问题 ：由于 可以加载来自不同源的文档，因此可能会遇到跨域资源共享（CORS）问题。这意味着，来自不同源的 可能会受到同源策略的限制，导致无法与父页面或与其他 进行某些交互。

2. 安全性 ： 可能被用于误导用户，例如通过加载看似可信但实际上包含恶意内容的页面。因此，在使用 时，应确保只加载可信的源。

3. 可访问性 ： 可能会对网站的可访问性造成负面影响，特别是当它们包含重要的内容或功能时。确保 内的内容对屏幕阅读器等辅助技术友好是很重要的。

4. SEO：搜索引擎优化（SEO）方面，中的内容通常不被搜索引擎视为父页面内容的一部分。这意味着，如果 包含对 SEO 重要的内容，那么这些内容可能不会被搜索引擎索引。

5. 浏览器兼容性：虽然现代浏览器都支持，但在一些较旧的浏览器或移动设备上可能会遇到兼容性问题。

进阶用法

除了基本的 src、width 和height属性外，还支持其他几个属性，如 name（用于在 或

标签的 target 属性中指定 作为目标）、sandbox（提供额外的安全限制，如禁止表单提交、脚本执行等）、allowfullscreen（允许 内容在全屏模式下显示）等。

通过使用 JavaScript 和 CSS，你还可以进一步控制 的样式和行为，实现更复杂的交互效果

例如：

    

        
        
        
首页
|
        
孔子 - 仁义礼
|
        
孟子 - 仁义礼智
|
        
董仲舒 - 仁义礼智信
        
    
    

        

            
首页
            
                
仁义礼智信为儒家‘五常’
            
            
仁 
            
                
孔子提出“仁、义、礼”
            
            
义
            
                
孟子延伸为“仁、义、礼、智”
            
            
礼
            
                
董仲舒扩充为“仁义礼智信”, 后称“五常”
            
            
智
            
                
“智慧每个人都应该有，但是有些蠢货没有”
            
            
信
            
                
信用每个人都应该有，但是有些人就是小丑
            
        
        
    
    


    

运行结果：