Question

这里我有一些代码用指定的类创建div，在这个div里面我创建iframe连接到我的聊天小部件

(function(){ 
var client_id = '1',
    p= 'right',
    vp = 'bottom';
    h = '550',
    dw = '400';
var d=document;
var w=window;

function l(){

    var s = document.createElement('div');
    s.id = 'chatrix_init_widget'; 
    s.style = 'position: fixed; z-index:101010; '+p+': 0; '+vp+': 0; height:'+h+'px; width: '+dw+'px';
    var ss = document.getElementsByTagName('body')[0].appendChild(s);

    var i = document.createElement('iframe');
    i.className = 'chatrix_iframe_container';
    i.height = '100%';
    i.width = '100%';
    i.src = '//danialart.biz/chatrix/widget.php?c='+client_id;
    var ss = document.getElementById('chatrix_init_widget').appendChild(i);

}
function s() {
    var s = document.createElement('script');
    s.type = 'text/javascript'; 
    s.src = '//danialart.biz/chatrix/js/client_side.js';
    var ss = document.getElementsByTagName('body')[0].appendChild(s);
}

if(d.readyState=='complete'){
    l();
    s();
}else{
    if(w.attachEvent){
        w.attachEvent('onload',l);
        s();
}else{
    w.addEventListener('load',l,false); s();}}})();

在名为s（）的函数中，我创建了连接远程jquery文件函数的脚本标记，但此文件（execlude consolel.log命令）中没有任何内容正常工作。不点击，或其他jquery操作根本不起作用。

Answer 1

当涉及iframes时，通常会出现此问题。我建议三种方法：

在您尝试放置jquery操作的元素上尝试onload：

$('#element').on('load',function(){
   //your action here for example click action
   $(this).on('click',function(){
   });
});

在iframe上试用onload：

$('.chatrix_iframe_container').on('load', function(){
   //do your actions here
});

虽然有时上述情况都不起作用，但我使用的setInterval我通常不建议将其视为不良做法

使用setInterval

 function myAction(){
    if($('#element').length){
      // do your actions here
      clearInterval(timer);
     }
 }
 var timer = setInterval(function(){myAction();},1000);

我自己做了测试，我可以通过以下修改来使你的逻辑工作：

在<head>标记中添加jQuery：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>
替换您的脚本开头：
```
(function(){
```

用这个：

(function($){

3.在脚本的最后，使用：

if(d.readyState=='complete'){
    l();
    s();
}else{
    if(w.attachEvent){
        w.attachEvent('onload',function(){
          l();
          s();
        });
}else{
    w.addEventListener('load',function(){l();s();},false);}}})(jQuery);
</script>

我已经复制了你的情况，现在它就像这样工作，因为我发现w.addEventListener正在加载你的脚本并且它正在添加脚本标记（s()）之前{ {1}}被添加到DOM（div）。这就是脚本不起作用的原因。

我希望它有所帮助

如何正确插入div来从jQuery操作它们？

1 个答案: