Question

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

Answer 1

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，并且将无声地失败。

无法获取AnyOrigin来加载int iframe

1 个答案: