2015-04-10 3 views
0

Я пытаюсь вставить элемент div внутри iframe, к которому я бы в конце концов применил идеальную полосу прокрутки. На данный момент я смог вставить iframe внутри div и применить к нему идеальную полосу прокрутки. Есть идеи?Вставка элемента div внутри iframe

Мой код выглядит следующим образом:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>perfect-scrollbar</title> 
    <link href="http://noraesae.github.io/perfect-scrollbar/bootstrap-combined.min.css" rel="stylesheet"> 
    <link href="http://noraesae.github.io/perfect-scrollbar/perfect-scrollbar.min.css" rel="stylesheet"> 

    <style> 
     #Sidebar 
     { 
      position:relative; 
      margin:0px auto; 
      padding:0px; 
      width: 230px; 
      height: 463px; 
      overflow: hidden; 
     } 
     #iframe 
     { 
      position: relative; 
     } 

    </style> 
    </head> 
    <body> 
     <div id='Sidebar'> 

     <iframe id="iframe" src="http://www.w3schools.com/" width= "230" height="700" scrolling="no" frameborder="0"> 

      </iframe> 
     </div> 
    <script src="http://noraesae.github.io/perfect-scrollbar/jquery.min.js"></script> 
    <script src="http://noraesae.github.io/perfect-scrollbar/perfect-scrollbar.min.js"></script> 
    <script src="http://noraesae.github.io/perfect-scrollbar/bootstrap.min.js"></script> 

    <script> 
     $(function() { 
     Ps.initialize(document.getElementById('Sidebar')); 
     $('#iframe')  
     .contents().find('body') 
     .append('<div id="sidebar"> Left Admin Panel </div>') 
     }); 
    </script> 
    </body> 
</html> 

Часть Я пытаюсь вставить как DIV внутри фрейма выглядит следующим образом:

<<ul class="sidebar-menu"> 

     <li class="header">MyOGI APPLICATIONS</li> 

     <li class="treeview"> 

      <ul class="treeview-menu"> 

      </ul> 
     </li> 


     <li class="header">GLOBAL APPLICATIONS</li> 

     <li class="treeview"> 
      <a href="#"> 

      <i class="fa fa-angle-left pull-right"></i> 
      </a> 
      <ul class="treeview-menu"> 

      </ul> 
      <li class="treeview"> 

      </li> 
      <li class="treeview"> 

      <ul class="treeview-menu"> 

      </ul> 
      </li> 

    </ul> 

ответ

0
$('#iframe')  
      .contents().find('body') 
      .append('mynewcontent goes here'); 
+1

не будет работать, так как это перекрестный домен –

1

Вы не можете манипулировать контента в плавающем фрейме вы не контролируете. Таким образом, в большинстве случаев это относится только к одному домену. Если это другой домен, вы сталкиваетесь с проблемой междоменного доступа, которая в основном неразрешима, если вы не владеете другим сайтом, а также