使用jquery在div中打开html链接

问题描述：

我想将html链接拖放到div元素中。我的要求是打开该div元素中的链接。我的页面上有两个部分“左侧面板”和“画布”。使用jquery在div中打开html链接

想法在这里是我的左侧面板我会有多个链接，当我放下任何这些链接在画布div它应该打开画布内的HTML链接。一个想法是使用iframe，但我想知道这是可能的，而不是iframe的div。我试过$ .ajax（）和load（），但没有一个似乎工作。我会感谢你在这方面的帮助。

这是我迄今所做的：

<head> 
     <link rel="stylesheet" href="../css/jquery-ui.css" type="text/css" /> 
     <script type="text/javascript" src="../scripts/jquery-1.6.js"></script> 
     <script type="text/javascript" src="../scripts/jquery-ui.min.js" ></script> 


    <style>  
      #canvasWrapper { 
       border: 1px solid #DDDDDD; 
       height: 100%; 
       vertical-align:top; 
       margin-left: auto; 
       margin-right: auto; 
       width: 90%; 

      } 
      .Frame { 
       border: 1px solid #DDDDDD; 
       height: 500px; 
       margin-left: auto; 
       margin-right: auto; 
       width: 100%; 
      } 
      .hFrame { 
       border: 1px solid #DDDDDD; 
       height: 50%; 
       width: 100%; 
       position:relative; 
      } 

      .nonSelectable { 
       border: 1px solid #DDDDDD; 
       height: 50%; 
       width: 100%; 
       position:relative; 
      } 

      .vFrame { 
       border: 1px solid #DDDDDD; 
       height: 100%; 
       width: 50%; 
      } 

      div.vFrame { 
       display:block; 
       float:left; 
      } 

      .buttonBar { 
       position: relative; 
       margin-left: auto; 
       margin-right: auto; 
       width:90%; 
      } 
    </style> 


</head> 
<body> 
    <div id="wrapper"> 
     <div id="banner"></div> 
     <div id="content-wrapper"> 
      <div id="content"> 
        <table class="layout-grid" cellspacing="0" cellpadding="0" style="height:100%;"> 
         <tbody> 
          <tr> 
           <td class="left-nav"> 
            <dl class="left-nav"> 
             <dt>Available Widgets</dt> 
             <dd> 
              <a href="../modules/1.html">I am no. 1</a> 
             </dd> 
             <dd> 
              <a href="../modules/2.html">I am no. 2</a> 
             </dd> 
             <dd> 
              <a href="../modules/3.html">I am no. 3</a> 
             </dd> 
            </dl> 
           </td> 
           <td class="normal">            
            <div id="canvasWrapper"> 
             <div id="canvasFrame" class="Frame"> 
            </div> 

           </td> 
          </tr> 
         </tbody> 
        </table> 

       </div> 
      </div> 

     </div> 
     <div id="footer"></div> 
    </div> 

    <script> 
     var lnk="",fullLink; 
     $(function() { 
      $(".left-nav dd").draggable({ 
         start: function (event,ui) { 
           var module= $(ui.draggable).html(); 
           lnk= $(this).children().attr("href"); 
         }, 
         revert: "invalid", 
         helper: "clone" 

        }); 
      $("#canvasFrame").droppable({ 
       drop: function(event, ui) { 
        $(this).addClass("ui-state-highlight").html(lnk); 
       } 
      }); 
     }); 
    </script> 

</body>

答

我不认为应该做的事。人们将iFrames与嵌入式网站联系起来。尝试使用iFrame，你可以轻松地做你想做的。拖动开头可以很容易地实现使用js或jQuery的尝试谷歌的。

例子： http://jsfiddle.net/CDtcq/3/

答

使用任何JavaScript框架，以满足这一点：

之一是：

http://jqueryui.com/demos/slider/ - 实现滑块。

然后，让您的脚本创建动态iFrame来加载拖动的链接。

// Create an iframe element 
$(‘<iframe />’); 

// You can also create it with attributes set 
$('<iframe id="myFrame" name="myFrame">'); 

// Finnaly attach it into the DOM 
$('<iframe id="myFrame" name="myFrame">').appendTo(<div>); 

// Setting iframe's source 
$('<iframe />').attr('src', 'http://www.google.com');

用户没有指定任何iframe作为要求之一吗？ – jsh 2012-12-20 16:07:33

@jsh我没有看到要求。我看到用户说其中的一个选项是使用iframe，但用div来询问任何可能性。 – 2012-12-21 07:49:19

答

我知道这是一个老问题，但我搞砸了，这里有一个基本的解决方案。您的HTML更改为以下：

<a href="#" class="drag_link" data-id="modules/1.html">I am no. 1</a>

更改您的div持有的对象，这样有什么东西砸链接到最初：

<div id="canvasFrame" class="Frame"> 
<object width="600" height="400">Drag and drop stuff here</object> 
</div>

最后JQuery的：

var lnk1=""; 

$(function() { 
    $(".drag_link").draggable({ 
     start: function (event,ui) { 
      var lnk1 = $(this).data('id'); 
      //var module= $(ui.draggable).html(); 
      $(this).addClass("ui-state-highlight"); 
      $("#canvasFrame").droppable({ 
      drop: function(event, ui) { 
      $(this) 
      .load(lnk1); 
      } 
     }); 
     } 
    }); 
});

当每个链接放在画布上时，它会加载相应的页面并突出显示链接。它没有做的是将链接返回到原来的位置，但这可以很容易地完成，我相信有人比我有更多的知识。

使用jquery在div中打开html链接

相关推荐