2013-03-01 71 views
3

我试图用AnyOrigin到URL加载到我的iframe:无法获得AnyOrigin加载INT IFRAME

问题:它加载一个空架,我究竟做错了什么?

代码

<!DOCTYPE HTML> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<meta charset="utf-8"> 
<script type="text/javascript"> 
$.getJSON('http://anyorigin.com/get?url=google.com&callback=?', function(data){ 
    $('#output').html(data.contents); 
}); 
    </script> 
</head> 
<body> 
<iframe id="output"></iframe> 
</body> 
</html> 

回答

3

Anyorigin使用JSONP,所以你不使用AJAX调用加载它。相反,callback查询参数应该是一个函数名,你应该载入它像一个普通的脚本标签:

<script src="http://anyorigin.com/get?url=google.com&callback=myCallbackFunction"></script> 

当脚本加载时,它会自动与您在指定的名称执行功能回调查询参数。当然,它的工作,你需要像这样定义一个函数:

<script> 

    function myCallbackFunction(myData) { 
     //myData.contents has your html, do something here 
    } 

</script> 

请注意,功能必须在脚本之前定义,所以无论是剧本需要能够动态地嵌入或者您需要定义脚本之前的功能。

有一些棘手的部分,比如你是如何填充的iframe,以及如何回调函数需要声明,所以我在这里包含一个完整的例子:

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script> 
function myCallbackFunction(myData) { 
    $(function() { 
     $("#test").contents().find('html').html(myData.contents); 
    }); 
} 
</script> 
<script src="http://anyorigin.com/get?url=http://google.com/&callback=myCallbackFunction"></script> 
</head> 
<body> 
</body> 
<iframe id='test' style='width: 100%; height: 100%'> 

</html> 

注意,我已包装调用更新jQuery文档onload事件中的iframe的内容。如果没有完成,那么调用将尝试在iframe存在之前填充iframe,并且会默默地失败。