在網頁開發過程中,跨域和跨站點的問題經常會出現。跨域是指當一個網頁向另外一個域名下的服務器請求數據時,瀏覽器會發現該請求不是同源請求,即將訪問的地址與瀏覽器地址的域名和端口號不一致。而跨站點是指一個源下的攻擊者試圖利用該源下的漏洞,向其他站點提供的數據進行攻擊。
//樣式表 p { font-size: 16px; color: #333; } //HTML代碼 <div class="container"> <iframe class="iframe" src="http://example.com"></iframe> </div> //JS代碼 var iframe = document.querySelector('.iframe'); var iframeWin = iframe.contentWindow; var iframeDoc = iframeWin.document; var iframeHead = iframeDoc.querySelector('head'); var link = iframeDoc.createElement('link'); link.setAttribute('rel', 'stylesheet'); link.setAttribute('type', 'text/css'); link.setAttribute('href', 'http://example.com/styles.css'); iframeHead.appendChild(link);
當需要在一個頁面中引用其他域名下的css文件時,由于跨域的原因,瀏覽器會阻止這個操作。我們可以使用一個iframe將需要引用的css文件放入同源的頁面,然后使用JavaScript將其添加到需要引用css的頁面中。
上一篇超鏈接的css樣式設置
下一篇輪播目標齒輪 css