jquery - 使内容可拖动 - 不等到加载iframe中的内容

时间:2016-10-14 12:52:30

标签: javascript jquery html css iframe

基本上我有一个图像,一旦按下图像,它会将html注入iframe,然后我想让内容可拖动,但是我的javascript代码要么不等待加载内容,要么是我的代码出错。

查看:

@extends('layouts.master')

@section('title', 'Best programmer ever')
@section('content')
    <script type="text/javascript" src="{!! asset('/js/jquery-3.1.1.min.js') !!}"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script type="text/javascript" src="{!! asset('/js/template.js') !!}"></script>
@endsection
        @section('template')
        <div class= "template_class">
            @foreach ($templates as $template)
        <a class="content-link" href="{{ asset($template->file )}}">
        <img id = "image" src="{{ asset($template->image )}}"/>
        </a>
            @endforeach
        </div>
            <iframe id="content-link2"></iframe>
@endsection
@show

使用Javascript:

$(function(){
   $('.content-link').click(function(e){
       e.preventDefault();
       $('#content-link2').attr("src",$(this)[0].href);
       console.log($('#content-link2'));
   return false;
   });
});
  $( function() {
    var $currentIframe = $('#content-link2');
   $currentIframe.contents().find('#content').draggable();
   console.log($currentIframe.contents().find('#content'));
});

模板,这是加载到iframe中的东西:

<!DOCTYPE html>

<html>
<head>
    <title>Template 1</title>

  <link href="css.css" rel="stylesheet" type="text/css">

</head>
<body>
<div id="content">Insert your content here</div>


</body>

0 个答案:

没有答案