包裝內容元素導致內聯腳本觸發

我在寫一個jQuery插件。在這個插件中，我將BODY的內容包裝在DIV中並隱藏它們。包裝內容元素導致內聯腳本觸發

var $originalBodyContents = $('body').wrapInner('<div>').children('div').hide();

插件，然後附加了自己的覆蓋DIV到BODY並執行它的插件魔法。當用戶退出插件時，刪除其覆蓋DIV，並解開它們。

$originalBodyContents.children().unwrap();

這是偉大的工作，你可以在這個演示中看到：
http://jsfiddle.net/vKddB/1/

但是，如果有內容腳本的網頁上，然後他們都當包裝出現重載，他們跑他們的再次編碼。這是造成很多意想不到的行爲，你可以在這個演示中看到：「你好！」
http://jsfiddle.net/vKddB/3/

在上面的演示中，你會看到「顯示警報」按鈕會顯示，上面寫着警告點擊時。如果您啓動插件並關閉插件，您會注意到「顯示警報」按鈕現在有兩個點擊處理程序，因此點擊時會顯示兩個警報。

我的插件將無法控制正在運行的頁面內容。有沒有辦法阻止內聯腳本重新運行時，我將主體內容封裝到DIV？

來源

2012-11-14 Chev

$('script', $('body')).remove();代碼

來源

2012-11-14 18:47:42

如果有什麼腳本塊包含被稱爲該網頁上的功能呢？我會從頁面中刪除它們。那會很糟糕。我只關心只在初始頁面加載時運行一次的代碼。 – Chev

正確..但由於腳本塊已經加載不會有任何效果，即使它被刪除？或者我們可以將它們移動到'' –

您的先生是正確的。天才我說。我很震驚，這工作：http://jsfiddle.net/vKddB/6/ – Chev

如果你希望你的插件上任意網頁的工作之前，你可能要考慮一個替代方法在您的覆蓋只是覆蓋原來的內容。我相信這將比包裝和隱藏，移動/刪除腳本節點等技巧更可靠。

來源

2012-11-14 18:54:37 jdigital

爲了簡潔起見，我忽略了細節，但問題是我無法使用固定位置，因爲我們的插件在移動瀏覽器上完全中斷（如果您想知道，這是一個報表查看器插件）。絕對定位效果很好，但用戶可以在疊加層之外滾動並查看底層主體內容。經過大量的試驗和錯誤之後，我意識到，如果我們的插件在打開時擁有全身自己的身體，它會好得多。 – Chev

我只是想分享我的建議，可能會幫助某人。它有點不同，div添加在頁面上，不會隱藏現有的div元素。可能會稍微快一點，因爲腳本不會搜索所有div div元素。

第一

//create the overlay with 
$('<div class="overlay" />').appendTo('body').show(); 

//close the overlay with 
$('.overlay').remove(); 

//css used for overlay 
.overlay 
{ 
    background-color: #363636; 
    background-image: url('a_nice_bg_image.png'); 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
    display: none; 
    z-index: 1000; 
    opacity: .55; 
    filter:alpha(opacity=55); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=55)"; 
}

來源

2012-11-14 19:03:03 Radu

這是我們最初採用的方法，但是我們遇到了大量與「position：fixed」和移動瀏覽器有關的問題。這就是爲什麼我們需要隱藏原始的身體元素。 – Chev

追加DIV到主體，設置它的位置，以絕對的，設置一個高z索引並調整大小以覆蓋整個內容。

 var $overlay = $('<div>') 
     .css({ 
      position: 'absolute', 
      top: 0, 
      left: 0, 
      width: $(document).width() + 'px', 
      height: $(document).height() + 'px', 
      backgroundColor: '#f00', 
      'z-index': 10000 
     }) 
     .appendTo('body');

像這樣（以最小的改動原來的代碼）：http://jsfiddle.net/Ya3DG/4/ :)

來源

2012-11-14 19:22:12 beon

這個問題是，如果由於底層頁面內容導致文檔很長，那麼您在疊加層中會得到一堆用戶可以滾動的空白區域。我們的報表查看器應該保留在視口內。 – Chev

包裝內容元素導致內聯腳本觸發

回答

相關問題