基本上我有一个图像,一旦按下图像,它会将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>