【前端基础知识】网易云音乐iframe外链的使用

这篇具有很好参考价值的文章主要介绍了【前端基础知识】网易云音乐iframe外链的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

iframe

HTML 内联框架元素 (< iframe>) 表示嵌套的浏览上下文(browsing context)。它能够将另一个 HTML 页面嵌入到当前页面中。

获取网易云外链iframe

使用网页版的网易云音乐!
<iframe frameborder=
<iframe frameborder=

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1366216050&auto=1&height=66"></iframe>

这一串就是网易云音乐的外链了

在Html页面中使用

新建一个html页面,复制这个标签到head里就可以了。
要注意的是需要在src开头加上协议:https:或者http:
<iframe frameborder=
网易云外链支持修改高度,可以把iframe的高度和src里的高度都调高,会呈现不一样的布局。
<iframe frameborder=

补充

1、iframe加载完成的事件

可以通过给iframe添加id,通过jquery来监听。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <title>Daily Music Sharing</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=86 id="music"
        src="https://music.163.com/outchain/player?type=2&id=1366216050&auto=1&height=66"></iframe>
</head>
<script>
$("#music").load(function () {
	console.log('iframe资源加载完成')
}
</script>

2、要想获取iframe里的元素必须处于同源

$("#music").load(function () {
	var music = document.getElementById('music').contentWindow;
	var play = music.document;
}

//报错:DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

提示跨域了文章来源地址https://www.toymoban.com/news/detail-717590.html

到了这里,关于【前端基础知识】网易云音乐iframe外链的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端知识与基础应用#2

    关于标签我们可以分为 : 单标签:img, br hr 双标签:a,h,div 按照属性可分为: 块儿标签(自己独自占一行):h1-h6, p,div 行内(内联)标签(自身多大就占多少):a, span,u,i,b 当我们输入h标签和a标签时可以看到 我们所输入的结果是这样的,其实这就是块儿标签和行内标签的

    2024年02月07日
    浏览(48)
  • 前端Angular框架基础知识(一)

    1.1 数据绑定 数据驱动DOM:将组件 类 (.ts文件)中的数据显示在组件 模板 (.html文件)中,当类中的数据发生变化会自动同步到模板中. Angular中使用差值表达式进行数据绑定, {{ }}语法 1.2 属性绑定 1.2.1 普通属性 使用【属性名称】为元素绑定DOM对象属性 使用【attr.属性名称】为元

    2024年01月17日
    浏览(40)
  • Websocket、Session&Cookie、前端基础知识

    目录 1.Websocket Websocket与HTTP的介绍 不同使用场景 Websocket链接过程 2.SessionCookie Cookie的工作原理 Session的工作原理 区别 3.前端基础知识 HTTP: 1. HTTP 是单向的,客户端发送请求,服务器发送响应。每个 HTTP 或 HTTPS 请求每次都会新建与服务器的连接,并且在获得响应后,连接将自

    2024年02月10日
    浏览(48)
  • 【前端知识】React 基础巩固(十三)——列表渲染

    在 React 中没有像 Vue 模块语法中的 v-for 指令,而是需要我们通过 JS 代码的方式组织数据,转成 JSX 在 React 中,展示列表最多的方式就是使用数组的 map 高阶函数 在展示数组前,有时会进行一些处理 过滤一些内容(filter 函数) 截取数组中的一部分内容(slice 函数) 列表中的

    2024年02月10日
    浏览(53)
  • 后端必会的前端vue基础知识

    build ------前端工程webpack构建设置 config ------ 前端工程构建参数设置(index.js 打包) src ---- 项目代码         api ---- 服务端口请求         assets ---- 项目静态文件、图片         coponents ---- 项目自定义组件         mock ----- 模拟数据         router ----- 项目路由配置      

    2024年01月20日
    浏览(48)
  • 前端02:CSS选择器等基础知识

    CSS基础选择器、设置字体样式、文本样式、CSS的三种引入方式、能使用Chrome调试工具调试样式 HTML专注做结构呈现,样式交给CSS,即结构(HTML)和样式CSS相分离 CSS主要由量分布构成,选择器以及一条或多条声明 选择器:给谁改样式 声明:改什么样的样式 在head最后写上styt

    2023年04月25日
    浏览(43)
  • 现代前端开发者的自我迷失,你还会前端基础知识吗?

    通常来说,我认为情况并不算糟糕,熟练的手可以几乎做到一切。然而,最近我注意到一些事情改变了我对这个行业的看法。似乎在这些无尽的趋势、范式和新奇玩意中,我们忘记了前端开发的支柱(意思是忘记了基础知识,没有轮子没法写代码了)。 在这篇文章中,我想分

    2023年04月08日
    浏览(46)
  • 【前端知识】React 基础巩固(二十八)——StrictMode

    StrictMode 是一个用来突出显示应用程序中潜在问题的工具 与 Fragment 一样,StrictMode 不会渲染任何可见的 UI 为后代出发额外的检测和警告 严格模式检查仅在开发模式下运行,不影响生产构建 严格模式检查什么? 识别不安全的生命周期 使用过时的 ref API 检查意外的副作用 组件

    2024年02月16日
    浏览(50)
  • 【前端知识】React 基础巩固(二十七)——Fragment

    Fragment 允许将子列表分组,而无需向 DOM 添加额外节点 可以采用语法糖 / 来替代 Fragment,但在需要添加 key 的场景下不能使用此短语 查看Fragment应用后的效果

    2024年02月16日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包