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

iframe

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

获取网易云外链iframe

使用网页版的网易云音乐!
在这里插入图片描述
在这里插入图片描述

<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的高度和src里的高度都调高,会呈现不一样的布局。
在这里插入图片描述

补充

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.

提示跨域了

好的,以下是使用Selenium爬取网易云音乐评论的步骤: 1. 安装Selenium和Chrome浏览器驱动。 ```python !pip install selenium ``` Chrome浏览器驱动下载地址:http://chromedriver.chromium.org/downloads 2. 导入必要的库和设置浏览器驱动路径。 ```python from selenium import webdriver from selenium.webdriver.common.keys import Keys import time # 设置浏览器驱动路径 driver_path = &#39;chromedriver的路径&#39; ``` 3. 打开网易云音乐网站并搜索指定的歌曲。 ```python # 打开网易云音乐网站 driver = webdriver.Chrome(executable_path=driver_path) driver.get(&#39;https://music.163.com/&#39;) # 切换到iframe中 driver.switch_to.frame("contentFrame") # 搜索指定的歌曲 search = driver.find_element_by_xpath(&#39;//*[@id="m-search-input"]&#39;) search.send_keys(&#39;告白气球&#39;) search.send_keys(Keys.RETURN) # 等待页面加载完成 time.sleep(3) ``` 4. 打开歌曲的评论页面并切换到最新评论。 ```python # 打开歌曲详情页 song_link = driver.find_element_by_xpath(&#39;//*[@id="song-0"]/div[2]/div/div[1]/div[1]/a&#39;) song_link.click() # 点击展开评论 comment_button = driver.find_element_by_xpath(&#39;//*[@id="cnt_comment_count"]&#39;) comment_button.click() # 切换到最新评论 comment_tab = driver.find_element_by_xpath(&#39;//*[@id="comment-box"]/div[1]/div[1]/ul/li[2]/a&#39;) comment_tab.click() # 等待页面加载完成 time.sleep(3) ``` 5. 模拟滚动鼠标操作,加载更多评论。 ```python # 模拟滚动鼠标操作,加载更多评论 for i in range(10): driver.execute_script(&#39;window.scrollTo(0, document.body.scrollHeight)&#39;) time.sleep(2) ``` 6. 获取所有评论的用户名和内容。 ```python # 获取所有评论的用户名和内容 comment_list = driver.find_elements_by_xpath(&#39;//*[@id="comment-box"]/div[1]/div[3]/div&#39;) for comment in comment_list: username = comment.find_element_by_xpath(&#39;./div[2]/a&#39;).text content = comment.find_element_by_xpath(&#39;./div[1]/div[1]&#39;).text print(username, content) ``` 7. 关闭浏览器。 ```python # 关闭浏览器 driver.quit() ``` 完整代码如下: ```python from selenium import webdriver from selenium.webdriver.common.keys import Keys import time # 设置浏览器驱动路径 driver_path = &#39;chromedriver的路径&#39; # 打开网易云音乐网站 driver = webdriver.Chrome(executable_path=driver_path) driver.get(&#39;https://music.163.com/&#39;) # 切换到iframe中 driver.switch_to.frame("contentFrame") # 搜索指定的歌曲 search = driver.find_element_by_xpath(&#39;//*[@id="m-search-input"]&#39;) search.send_keys(&#39;告白气球&#39;) search.send_keys(Keys.RETURN) # 等待页面加载完成 time.sleep(3) # 打开歌曲详情页 song_link = driver.find_element_by_xpath(&#39;//*[@id="song-0"]/div[2]/div/div[1]/div[1]/a&#39;) song_link.click() # 点击展开评论 comment_button = driver.find_element_by_xpath(&#39;//*[@id="cnt_comment_count"]&#39;) comment_button.click() # 切换到最新评论 comment_tab = driver.find_element_by_xpath(&#39;//*[@id="comment-box"]/div[1]/div[1]/ul/li[2]/a&#39;) comment_tab.click() # 等待页面加载完成 time.sleep(3) # 模拟滚动鼠标操作,加载更多评论 for i in range(10): driver.execute_script(&#39;window.scrollTo(0, document.body.scrollHeight)&#39;) time.sleep(2) # 获取所有评论的用户名和内容 comment_list = driver.find_elements_by_xpath(&#39;//*[@id="comment-box"]/div[1]/div[3]/div&#39;) for comment in comment_list: username = comment.find_element_by_xpath(&#39;./div[2]/a&#39;).text content = comment.find_element_by_xpath(&#39;./div[1]/div[1]&#39;).text print(username, content) # 关闭浏览器 driver.quit() ``` 注意:爬虫行为容易引起网站的反爬虫机制,使用时请注意合理使用,避免对网站造成影响。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@Dai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值