更改iframe內(nèi)元素樣式

需要注意點(diǎn):

所有的操作必須確保在$('iframename').load(function(){})內(nèi)進(jìn)行;

$('#iframe').load(function({

? ? ?所要進(jìn)行的操作

}))確保iframe裝載完畢之后進(jìn)行后續(xù)操作;不然你可能得到

var x = document.getElementById('iframe').contentWindow.document.getElementById('container');

console.log(x)?

打印臺(tái)結(jié)果為:// null

var x = document.getElementById('iframe').contentWindow.document

console.log(x)

打印臺(tái)結(jié)果為:

并沒(méi)有我們引入頁(yè)面的內(nèi)容,

方法一:直接通過(guò)js或者jQ獲取iframe DOM節(jié)點(diǎn)進(jìn)行控制

如果要使用jQeury獲取frame內(nèi)元素的話必須確保iframe所引入的頁(yè)面內(nèi)引入了jQuery框架;

$('#iframe').load(function () {

? ? var x = document.getElementById('iframe').contentWindow.document.getElementById('container');

? ? x.style.width = "100%";

? ? x.style.height = "100%";

? ? console.log(x)//以iframe中找元素a為例

});

方法二:創(chuàng)建link標(biāo)簽,添加到iframe中

$('#iframe').load(function () {

? ? var cssLink = document.createElement("link");

? ? cssLink.href = "style.css";

? ? cssLink.rel = "stylesheet";

? ? cssLink.type = "text/css";

? ? frames['iframe'].document.body.appendChild(cssLink);

});

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 工廠模式類(lèi)似于現(xiàn)實(shí)生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實(shí)現(xiàn)同樣的效果;這時(shí)候需要使用工廠模式。簡(jiǎn)單...
    舟漁行舟閱讀 8,118評(píng)論 2 17
  • 單例模式 適用場(chǎng)景:可能會(huì)在場(chǎng)景中使用到對(duì)象,但只有一個(gè)實(shí)例,加載時(shí)并不主動(dòng)創(chuàng)建,需要時(shí)才創(chuàng)建 最常見(jiàn)的單例模式,...
    Obeing閱讀 2,314評(píng)論 1 10
  • 自適應(yīng)高度,其實(shí)就是設(shè)置iframe的高度,使其等于內(nèi)嵌網(wǎng)頁(yè)的高度,從而看不出來(lái)滾動(dòng)條和嵌套痕跡。對(duì)于用戶(hù)體驗(yàn)和網(wǎng)...
    布拉德皮蛋_qzy閱讀 3,471評(píng)論 0 3
  • 一、DOM 什么是DOM?Document Object Model(文檔對(duì)象模型)。DOM是針對(duì)HTML和XML...
    空谷悠閱讀 1,030評(píng)論 0 2
  • 以下是常用的代碼收集,學(xué)習(xí)用。轉(zhuǎn)自豪情博客園 1. PC - js 返回指定范圍的隨機(jī)數(shù)(m-n之間)的公式 re...
    自由加咖啡閱讀 1,104評(píng)論 0 1

友情鏈接更多精彩內(nèi)容