日期:2014-05-16  浏览次数:20572 次

jQuery 创建 iframe 出现一个很怪的问题
jQuery(document).ready(function($) {
  $("a[rel*=facebox]").click(function(){
  var Iframess = document.createElement("div");
  Iframess.width = 300;
  Iframess.height = 300;
  Iframess.innerHTML = "<iframe src='login.aspx'></iframe>"
  document.body.appendChild(Iframess);
  });
  })

单击 创建出来的 iframe 是空白的!!!

下面创建出来却不是空白的!!!


  jQuery(document).ready(function($) {
  var Iframess = document.createElement("div");
  Iframess.width = 300;
  Iframess.height = 300;
  Iframess.innerHTML = "<iframe src='login.aspx'></iframe>"
  document.body.appendChild(Iframess);
  })


请问怎么回事

------解决方案--------------------
楼主你保证第一个是创建了吗?代码是一样的,要是创建了怎么可能不显示那,我觉得就没有进入那个click函数,楼主可以打印一下东西,一样的代码,怎么会不一样的那
------解决方案--------------------
为什么没有加载那?试试别的页面可以加载吗?这个情况我还真的没有遇到过
------解决方案--------------------
没有证据.

猜测的原因:
第二种的时候, 将iframe追加到文档流中时, 文档的解析实际是没有完全完成的, 因为还在document.onready的事件中.
第一种则完全是文档加载完之后, 由用户触发创建的iframe, 可能浏览器不去主动加载, 

没有经过实验...勿笑
------解决方案--------------------
以下代码在IE6, 7, 8, chrome, firefox, opera下都测试通过
HTML code

<html>
  <head>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript">
      $(function() {
        $('#c').click(function() {
          $('body').append(
            $('<div style="width: 500px; height: 300px;">').append(
              $('<iframe src="http://www.baidu.com" style="width: 500px; height: 300px;">')
            )
          );
        });
        
          $('body').append(
            $('<div style="width: 500px; height: 300px;">').append(
              $('<iframe src="http://www.baidu.com" style="width: 500px; height: 300px;">')
            )
          );
      });
    </script>
  </head>
  <body>
    <input type="button" value="click" id="c" />
  </body>
</html>

------解决方案--------------------
以下代码在IE6, 7, 8, chrome, firefox, opera下都测试通过
HTML code

<html>
  <head>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript">
    function createIframe4Standard() {
      var wrapper = document.createElement('div');
      var iframe = document.createElement('iframe');
      wrapper.style.setProperty('width', '500px', 1);
      wrapper.style.setProperty('height', '300px', 1);
      iframe.style.setProperty('width', '500px', 1);
      iframe.style.setProperty('height', '300px', 1);
      iframe.setAttribute('src', 'http://www.baidu.com');
      wrapper.appendChild(iframe);
      return wrapper;
    }
    function createIframe4Ie() {
      var wrapper = document.createElement('div');
      var iframe = document.createElement('iframe');
      wrapper.style.width = '500px';
      wrapper.style.height = '300px';
      iframe.style.width = '500px';
      iframe.style.height = '300px';
      iframe.src = 'http://www.baidu.com';
      wrapper.appendChild(iframe);
      return wrapper;
    }
    function createIframe() {
      return document.all ? createIframe4Ie() : createIframe4Standard();
    }
      $(function() {
        $('#c').click(function() {