使用Ajax或Jsonp导入URL而不使用iframe

时间:2014-03-31 15:43:13

标签: javascript php jquery ajax iframe

我有这个简单的索引:

<head>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
</head>
<body>
<div style="bottom: 0px;position: absolute;">
    <? include("inc/creditos.php")?>
</div>
</body>
</html>

creditos.php:

<script>
// JavaScript Document
$(document).ready(function(){                   
    $('#show_credits').click(function(){
        //$('iframe#cred').css("display","none");
        var pos=$(this).position();
        if (pos.left>200) pos.left=pos.left-250;                                  
            $('#cred').css("top",pos.top-240);                            
            $('#cred').css("left",pos.left);
            $('#cred').fadeIn("slow");
            //$("iframe#cred").contents().find("#creditos").css('display','none');
            $('#close').css("background-color","red");  
            $('#close').css("top",pos.top-223);                           
            $('#close').css("left",pos.left+293);
            $('#close').css("position","absolute");
            $('#close').fadeIn("slow");
            $('#close').css("z-index","1");
            $('#close').css("width","20px");
            $('#close').css("height","20px");           
        });

    $('#close').click(function(){
        $('#cred').fadeOut("slow");
        $('#close').fadeOut("slow");

});
    }); 
</script>
<iframe style="position:absolute;width:313px;height:234px;display:none;border:0;"id="cred" name="test_creditos" src="http://img1.wikia.nocookie.net/__cb20100909154419/mario/es/images/5/54/Flor_de_Fuego.jpg" scrolling="no"></iframe>
<a class="credits" href="javascript:void(0)" id="show_credits">Cr&eacute;ditos</a>
<a href="javascript:void(0)" class="close" id="close" style="display:none;"></a>

我可以使用没有iframe的Ajax或Jsonp(当我点击&#34时调用并导入图像; Creditos&#34;)?

我需要删除iframe并获得相同的结果:/

2 个答案:

答案 0 :(得分:0)

您可以使用jQuery.get()检索网址上的文件,然后对内容执行任何操作:https://api.jquery.com/jQuery.get/

答案 1 :(得分:0)

您正在显示图像。没有必要使用Ajax。

创建图像元素。

var image = document.createElement('img');

设置强制属性:

image.src = "http://img1.wikia.nocookie.net/__cb20100909154419/mario/es/images/5/54/Flor_de_Fuego.jpg";
image.alt = "Something suitable here";

将其添加到文档中:

document.body.appendChild(image);