2015-02-18 3 views
0

Я представляю страницу, которая динамически создает iframe как часть страницы. Содержимое отображается в iframe при его создании. У меня также есть ссылка, которая «нацеливает» iframe на рендеринг дополнительных страниц.Динамическая загрузка javascript приводит к повреждению iframe

Код, который отображается внутри iframe, динамически загружает javascript. Однако при нажатии ссылки, которая нацелена на имя iframe, вместо рендеринга содержимого в iframe создается новое окно, как будто target = "blank". Если я прокомментирую динамическую загрузку javascript, ссылка target = отлично работает каждый раз.

Насколько я могу судить, я делаю динамическую загрузку должным образом. Код js загружается и выполняется правильно. Однако я не уверен, что происходит с DOM, чтобы сбить цель. Любая помощь будет оценена по достоинству.

page1.html:

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
    <script type="text/javascript"> 
     var ifr = "<iframe width='998' name='main' 
     id='main' src='page2.html' scrolling='no' 
     frameborder='1' height='100'></iframe>"; 
     $(document).ready(function() { 
     $("#content").html(ifr); 
      $('iframe').load(function() { 
      this.style.height = 
       this.contentWindow.document.body.offsetHeight + 60 + 'px'; 
      }); 
     }); 
    </script> 
    <body> 
    <div id="wrapper" style="height: 100px;"> 
     <p><a href="index1_mgc1.html" target="main">Click Me</a></p> 
     <div id="content"> 
     </div> 
    </div> 
    </body> 

page2.html:

<script type="text/javascript"> 
    // var ScriptLoaded = true; 
    if (typeof ScriptLoaded == 'undefined') { 
     var scripts = ["js/jquery-1.6.2.min.js"]; 
     for (i=0; i<scripts.length; i++) { 
     var name = scripts[i]; 
     loadScript(name, function() { 
     }); 
     } 
    }; 

    window.onload = waitForLoad(); 

    function loadScript(name,callback) { 
     var script = document.createElement('script'); 
     script.type = "text/javascript"; 
     if (script.readyState) { // IE 
      script.onreadystatechange = function() { 
      if (script.readyState == "loaded" || 
        script.readyState == "completed") { 
       script.onreadystatechange = null; 
       callback(); 
      } 
      } 
     } else {  // Other 
     script.onload = function() { 
      callback(); 
     } 
     } 
     script.src = scripts[i]; 
     document.getElementsByTagName("head")[0].appendChild(script); 
    }; 
    function waitForLoad() { 
    if (typeof jQuery == "undefined") { 
     setTimeout(waitForLoad,500); 
    } 
    }; 
</script> 
<body> 
<div class="page"> 
    this is in an iframe 
</div> 
+0

Что заставляет меня терпеть неудачу, когда я копирую и вставляю код в том, что в JS вы не можете объявлять строки на нескольких строках, как это. Попробуйте объявить 'var ifr' в одной строке или с помощью конкатенации. – blex

+0

Благодарим вас за это. Я изменил эту декларацию только на 1 полный оператор. – TripleC

+0

Любые идеи кто-нибудь? – TripleC

ответ

0

Я искал природного решения, но не похоже, чтобы быть один.

target="someIframe" не нравится, когда iframe динамически создается. Вот обходной путь можно разместить после создания IFRAME:

$('a[target="main"]').click(function(ev){ 
    var src = $(this).attr('href'); 
    $('#main').attr('src', src); 
    ev.preventDefault(); 
}); 

Он будет выбирать каждую ссылку, которая имеет IFRAME в качестве мишени, и при нажатии на них, он получит их href, установить его в качестве IFrame-х src и запретить открытие ссылки в новом окне.

+0

Спасибо Blex. Это работало как чемпион. Бог благословил! – TripleC

Смежные вопросы