3

我正在尝试使用 AnyOrigin 将 url 加载到我的 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>
4

1 回答 1

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 存在之前填充它，并且会静默失败。

于 2013-03-01T06:35:18.200 回答