Question

所以现在我有一个弹出式div（这是一个镀铬扩展名），现在div弹出就好了。

我想要做的是将我创建的这个布局文件（很多itty bitty设计部分）注入div。我该怎么做呢我试图将innerHTML属性设置为index.html（布局文件）

jQuery(function($) {
  // Mouse listener for any move event on the current document.

  console.log("started"); //debug for starting
  var popupStatus = 0; // set value

  document.addEventListener('mousemove', function (e) {
    var srcElement = e.srcElement;
    // Lets check if our underlying element is a DIV.
    if (srcElement.nodeName == 'A' || srcElement.nodeName == 'STRONG') {  
      loadPopup();  
    }
    else{
      disablePopup();
    }
  }, true);

  function loadPopup() { 
    var x = document.getElementById("index");
    if(popupStatus == 0) { // if value is 0, show popup
      $('<div/>', {
        id: 'cover',
        innerHTML: index.html //line in question (making it "index.html" doesn't work)
      }).appendTo(document.documentElement);
      $('#cover').fadeTo("slow",1);
      popupStatus = 1; // and set value to 1
    }   
  }

  function disablePopup() {
    if(popupStatus == 1) { // if value is 1, close popup
      $('#cover').fadeTo("slow",0);
      $('#cover').remove();
      popupStatus = 0;
    }
  }
});

Answer 1

也许您可以使用ajax来获取文件内容＆＃39; index.html＆＃39;。

这样的片段：

$.get("index.html", function( data ) {
    $.('body').append('<div id="cover">' + data + '</div>');
});

可以放在相关的行上。替换＆＃39; body＆＃39;满足您的需求。该片段当然可以改进，但是现在它应该给你一个想法。

我不知道在客户端使用JavaScript读取文件的其他可能性。

或者现在我明白了，最好能做到：

$.get("index.html", function( data ) {
    $('<div/>', {
        id: 'cover',
        innerHTML: data
    }).appendTo(document.documentElement);
});

在if条件下

。

我不完全确定您要制作的内容，但似乎您希望将其附加到ID为＆＃39; index＆＃39;的元素中。你应该在最后一行适当地改变它。

编辑：

以下是一些细微的变化：

$.get("index.html", function( data ) {
    $('<div/>', {
        id: 'cover',
        html: data // this was making the problem
    }).appendTo(x); // append to the element saved in the variable x
}, "html"); // state explicitly that the payload of data is HTML

让代码片段为我工作。

如何将html布局文件插入div？

1 个答案: