我有一個完整<iframe />作爲父母div。該iframe來自不同的域。當iframe被點擊時，你如何調整它的大小（在我的情況下添加類）父div？並在單擊iframe的關閉按鈕時將其調整大小？JS：當點擊iframe時調整div的大小？

我更喜歡如果iframe的按鈕沒有調整大小，但顯然div無法在iframe內部達到，所以我必須在iframe之外執行此操作。

2014-11-03 user2002495

試試這個：

document.getElementById("myIFrame").onclick = function(){  
    document.getElementById("myDiv").className = ""; //New Class Name 
};

祝您好運！

來源

2014-11-03 12:44:11 DripDrop

-1

通過使用獲得iframe中值

jQuery的

$('#yourIframe').contents().find('#yourDiv').html(); 
    //you might have to use .val(), depending on browser or context

或JavaScript的

http://www.w3schools.com/jsref/prop_frame_contentwindow.asp

來源

2014-11-03 12:56:34 d689p

您必須創建某種覆蓋的檢測初始焦點iframe事件。如果您根據課程顯示，關閉按鈕也可以成爲您網站的一部分。

http://jsfiddle.net/cxtgn72g/4/

HTML

<div id="iframe"> 
    <div id="overlay"></div> 
    <div id="close">X</div> 
    <iframe src="//www.youtube.com/embed/6PRq7CmiWhM?list=PLIOa6mDiSeismsV_7YFti-5XOGRzmofSZ"></iframe> 
</div>

JS - 需要jQuery的

$("#overlay").click(function() { 
    $("#iframe").addClass("big"); 
}); 

$("#close").click(function() { 
    $("#iframe").removeClass("big");   
});

CSS

#iframe { 
    width : 500px; 
    height : 300px; 
    position : relative; 
} 

#iframe.big { 
    width : 600px; 
    height : 400px; 
} 

iframe { 
    width : 100%; 
    height : 100%; 
    border : none; 
} 

#overlay {  
    position : absolute; 
    left : 0; 
    top : 0; 
    width : 100%; 
    height : 100%; 
} 

#close { 
    display : none; 
} 

.big #close { 
    cursor : pointer; 
    display : block; 
    position : absolute; 
    right : 10px; 
    top : 10px; 
    content : "X"; 
    background : red; 
    color : white; 
    border-radius : 25%; 
    padding : 8px; 
} 

.big #overlay { 
    display : none; 
}

來源

2014-11-03 13:28:10

不需要jquery（其實絕對不能）。我正在開發一個基於iframe的聊天窗口小部件，所以我必須假設客戶端沒有jQuery。我可以使用js'className'。至於關閉按鈕，它也不能在iframe之外。 – user2002495 2014-11-04 00:54:47

所以基本上你正在創建一個聊天插件，讓人們注入他們的網站。它不是你的網站需要插件？ – 2014-11-04 18:59:28

是的，它已經完成，感謝您的幫助（我有一個github回購這個順便說一句，只是爲了測試） – user2002495 2014-11-05 10:15:23

我有同樣的問題，並寫了一個jQuery插件。 https://github.com/SammySoft/iframeActivationListener

見例如：
http://jsfiddle.net/56g7uLub/3/

如何使用：

$(document).ready(function() 
{ 
    $('iframe').iframeActivationListener(); 
    $('iframe').on("activate", function(ev) { 
     $(ev.target).addClass("big"); 
    }); 
});

這個插件不使用疊加的div。
它檢查鼠標是否處於非活動狀態的iframe並開始觀看文檔的activeElement。當它更改爲另一個iframe時，會激發自定義事件「activate」。

這是我發現的最佳解決方案。

來源

2016-01-22 09:21:39 Sammy

JS：當點擊iframe時調整div的大小？

回答

祝您好運！

相關問題