1. 爱易网页
  2. JavaSript
  3. jQuery 创建 iframe 出现一个很怪的有关问题

jQuery 创建 iframe 出现一个很怪的有关问题

日期：2014-05-16　 浏览次数：20685 次

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() {

相关资料更多>

  1. 参数传递有关问题
  2. js获取gridview的ItemTemplate中textbook的值,该怎么解决
  3. 特大型JavaScript应用程序架构模式
  4. [百度分享]认知维度与API的可用性评估(2),该怎么解决
  5. JSF入门10（自定义转换器）
  6. javascript中将字符串变换为json格式的三种方法
  7. javascript判断是不是为IE浏览器
  8. js统制form表单提交 为空校验
  9. div内容复制的有关问题，