整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
從給定的字符串中提取<iframe>標(biāo)簽的src屬性值，可以使用正則表達(dá)式來(lái)進(jìn)行匹配。以下是一個(gè)示例代碼：
csharp復(fù)制代碼using System;
using System.Text.RegularExpressions;
class Program
{
static void Main()
{
string html="<iframe src=\"https://www.testx.cn/3D\" width=\"100%\" height=\"100%\" style=\"display: block;min-height: 990px;\"></iframe>";
// 創(chuàng)建正則表達(dá)式模式
string pattern="<iframe\\s+src=('|\")([^'\"]+)('|\")";
// 使用Regex.Match方法進(jìn)行匹配
Match match=Regex.Match(html, pattern);
if (match.Success)
{
// 提取src屬性值
string iframeSrc=match.Groups[2].Value;
// 輸出src屬性值
Console.WriteLine(iframeSrc);
}
}
}
上述代碼中，我們使用了與之前相同的Regex.Match方法和正則表達(dá)式模式來(lái)匹配<iframe>標(biāo)簽的src屬性。然后，我們從匹配結(jié)果中提取了src屬性值。
請(qǐng)注意，為了正確處理轉(zhuǎn)義字符，我們?cè)谡齽t表達(dá)式模式中使用了雙引號(hào)括起來(lái)的\"來(lái)表示雙引號(hào)。這樣可以確保我們能夠正確地匹配包含轉(zhuǎn)義字符的字符串。
使用正則表達(dá)式提取HTML標(biāo)記的屬性時(shí)，請(qǐng)確保對(duì)輸入進(jìn)行合理的驗(yàn)證和錯(cuò)誤處理，以避免潛在的異常情況或安全漏洞。
、iframe標(biāo)簽
自己編寫的頁(yè)面中如果要引用外部的頁(yè)面的話，可以使用iframe標(biāo)簽來(lái)實(shí)現(xiàn)。為了更好地理解舉個(gè)例子，前面幾篇中我們都是在index.hmtl中編寫代碼。如果有個(gè)需求是在我們的index.html中引入百度的頁(yè)面，就可以使用iframe標(biāo)簽來(lái)實(shí)現(xiàn)。
iframe和img標(biāo)簽一樣也有一個(gè)src屬性，這個(gè)屬性寫上百度的地址，就可以把百度的頁(yè)面引入到我們編寫的index.html頁(yè)面中來(lái)了。
在瀏覽器中的效果，你會(huì)發(fā)現(xiàn)并沒(méi)有顯示百度的頁(yè)面，那是因?yàn)槲覀兊拇a是直接放在電腦桌面上的，要想顯示，我們需要把index.html頁(yè)面放到web服務(wù)器中才行，這個(gè)web服務(wù)器我們后面會(huì)講。這里先知道一下就行。為了測(cè)試效果我先將index.html頁(yè)面放到本地搭建的web服務(wù)器中讓大家看小效果：
上圖就是引入百度頁(yè)面的效果了。
當(dāng)然不是說(shuō)不知道web服務(wù)器就沒(méi)辦法測(cè)試iframe標(biāo)簽，我們可以新創(chuàng)建一個(gè)頁(yè)面，引入我們新創(chuàng)建的頁(yè)面也是可以的。
1.創(chuàng)建detail.html頁(yè)面
detail.html頁(yè)面要和你的index.html頁(yè)面放在同一個(gè)文件夾下面。
2.在detail.html中寫一些代碼：
3.在index.html中引入detail.html頁(yè)面
瀏覽器中的效果：
為了看得更加明顯，我們?cè)趇ndex.html中也加上一句話：
再看瀏覽器中的效果：
由上面的測(cè)試結(jié)果來(lái)看，得出iframe標(biāo)簽的主要功能就是引入一個(gè)頁(yè)面，引入的頁(yè)面可以網(wǎng)絡(luò)上的，比如百度（https://www.baidu.com）、搜狐（https://www.sohu.com/）等等，也可以是你自己編寫的一個(gè)頁(yè)面。
二、embed視頻標(biāo)簽
見(jiàn)名知意，視頻標(biāo)簽就是用來(lái)播放視頻的，我們經(jīng)?？吹降膼?ài)奇藝、騰訊視頻都可以用視頻標(biāo)簽來(lái)實(shí)現(xiàn)。
embed標(biāo)簽同樣使用src屬性來(lái)引入視頻文件，這個(gè)視頻文件可以使用網(wǎng)絡(luò)上的一個(gè)視頻地址，也可以是本地的一個(gè)視頻地址。但是要注意，如果要引入網(wǎng)絡(luò)上的視頻的話，需要把index.html頁(yè)面放到web服務(wù)器中。
這里我們使用本地的視頻文件來(lái)做演示：
1.找個(gè)視頻文件（可以從網(wǎng)上下載），放到和index.html文件同一個(gè)文件夾中：
我這里放了一個(gè)《葉問(wèn)》的電影視頻。
2.在index.html文件用使用embed視頻標(biāo)簽引入這個(gè)視頻：
我們來(lái)看看瀏覽器中的效果：
視頻可以正常播放。
html標(biāo)簽是編程中必不可少的東西，不管你是看網(wǎng)頁(yè)或者手機(jī)app還是電腦上的游戲，都需要一個(gè)漂亮的界面。想要做一個(gè)漂亮的界面就必定會(huì)使用到html這種標(biāo)記語(yǔ)言，html是學(xué)習(xí)編程的開(kāi)始，它在編程學(xué)習(xí)中是最簡(jiǎn)單的部分，所以沒(méi)理由不學(xué)好它。
最后補(bǔ)充幾個(gè)文檔標(biāo)簽：
如果你經(jīng)常逛淘寶或者京東的話，你會(huì)發(fā)現(xiàn)他們都有一個(gè)共同的特點(diǎn)，就是都有一個(gè)頭部，都會(huì)有一個(gè)導(dǎo)航條，都會(huì)有一個(gè)尾部，如下圖：
淘寶首頁(yè)：
京東首頁(yè)：
頭部的內(nèi)容我們一般放在header標(biāo)簽中、導(dǎo)航條一般放在nav標(biāo)簽中、尾部一般放在footer標(biāo)簽中。
代碼示例：
瀏覽器中的效果：
它們?nèi)齻€(gè)是純屬語(yǔ)義化的標(biāo)簽，并沒(méi)有什么效果，但為什么要用它們呢？
當(dāng)你的代碼有成千上萬(wàn)上的時(shí)候，你可以很明顯地知道header標(biāo)簽中的代碼屬于頭部的代碼，nav標(biāo)簽中的代碼屬于導(dǎo)航條的代碼，footer標(biāo)簽中的代碼屬于尾部的代碼，可以快速定位代碼的位置。這就是它們的作用。
天有人反饋了一個(gè)在iframe內(nèi)無(wú)法調(diào)用網(wǎng)站同一個(gè)站點(diǎn)的頁(yè)面問(wèn)題并報(bào)錯(cuò)，就在網(wǎng)站查了一些相關(guān)的資料，整理一下關(guān)于禁止網(wǎng)站所有頁(yè)面或某一個(gè)頁(yè)面被iframe內(nèi)框架調(diào)用的方法。
網(wǎng)站iframe內(nèi)框架調(diào)用頁(yè)面報(bào)錯(cuò)如下
Refused to display http://xxxxxx.com in a frame because it set 'X-Frame-Options' to 'deny'.
通過(guò)查到的資料可得知，此錯(cuò)誤與iframe框架被調(diào)用頁(yè)面的 HTTP 標(biāo)頭中 X-Frame-Options 設(shè)置有關(guān)，所以整理了如下資料
X-Frame-Options是一個(gè)HTTP響應(yīng)頭，用來(lái)告訴瀏覽器此頁(yè)面是否可以在其它網(wǎng)頁(yè)中的frame或iframe標(biāo)簽中被渲染，網(wǎng)站可以利用此響應(yīng)頭來(lái)避免被其它網(wǎng)站所劫持。
X-Frame-Options有三個(gè)參數(shù)值，分別如下
DENY：表示不能被嵌入到任何iframe或frame中。
SAMEORIGIN：表示頁(yè)面只能被本站頁(yè)面嵌入到iframe或者frame中。
url，指定是一個(gè)域名，表示此網(wǎng)頁(yè)只能被指定域名下的頁(yè)面中的框架所調(diào)用
html代碼
以下代碼，添加到HTML頁(yè)面中的head標(biāo)簽內(nèi)即可
代碼1：html頁(yè)面禁止被框架調(diào)用
<meta http-equiv="X-Frame-Options" content="deny">
代碼2：只允許頁(yè)面被本站調(diào)用
<meta http-equiv="X-Frame-Options" content="SAMEORIGIN">
代碼3：只允許頁(yè)面被指定URL嵌套調(diào)用
<meta http-equiv="X-Frame-Options" content="http://www.feiniaomy.com">
PHP代碼
<?php
//示例1
header('X-Frame-Options: deny');
//示例2
header('X-Frame-Options: SAMEORIGIN');
//示例3
header('X-Frame-Options: http://www.feiniaomy.com');
?>
攻擊者可以使用一個(gè)透明的、不可見(jiàn)的iframe標(biāo)簽，加載目標(biāo)頁(yè)面，然后通過(guò)調(diào)整iframe頁(yè)面的位置，誘導(dǎo)用戶進(jìn)行點(diǎn)擊操作頁(yè)面的功能區(qū)，并劫持用戶的數(shù)據(jù)，達(dá)到劫持頁(yè)面的目的。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
