jQuery 移动应用程序中的 iFrame 导致错误答案

【问题标题】：iFrame in jQuery mobile application causes errorjQuery 移动应用程序中的 iFrame 导致错误
【发布时间】：2012-07-24 20:11:01
【问题描述】：

jQuery 移动应用程序中的 iFrame 导致错误：Unsafe JavaScript attempt to access frame with URL file:///D:/xx/webpage.html from frame with URL http://www.asp.net/. Domains, protocols and ports must match.

我正在开发一个使用 iFrame 加载外部网站的 jQuery 移动应用程序。
我的脚本代码是：

  $(document).ready(function () {

$('#divID').prepend('<img  src="http://xxx/images/ICPosternew1002.png" usemap="#map" id="image" style="margin-top:43px;"/>')
    $('#map').append('<area coords="30,0,60,30" id="1" alt="Blah" title="asp" />')
    $("#1").bind("click", function (e) {                
    e.preventDefault();         
           $('#Web1').append('<form id="form1" runat="server" rel="external"></form>')              
        $('#form1').append('<iframe id="iframe1" src="http://asp.net" frameborder="0" rel="external"></iframe>')
        });
    });

我的应用程序中有两个虚拟页面。点击主页中的图像地图时，会加载带有 iFrame 和相应网站的第二页。

         <div data-role="page" id="Web" class="pagebody">
    <div data-role="header" data-position="inline" data-theme="a">
            <!--header-->
        </div>
        <div data-role="content" id="Web1">
    <form id="form1" runat="server">
            <iframe id="iframe1" >
            </iframe>
            </form> 
        </div>
        <div data-role="footer" class="footer">
            <!--footer-->
        </div>
    </div>

是我的代码有问题吗？

【问题讨论】：

标签： jquery iframe jquery-mobile

【解决方案1】：

我猜你可以这样解决：

                     $(document).ready(function () {

                    var html = "";
                    html += "<div data-role=page id=win2 class=pagebody>";
                    html +=   "<div data-role='header'>";   
                    html +=   "</div>";
                    html +=   "<div data-role=content>";
                    html +=   "</div>";
                    html +=   "<div class=push>";
                    html +=   "</div>";
                    html +=   "<div data-role=footer class=footer>";
                    html +=   "</div>"
                    html += "</div>";
                    $(html).insertAfter ("#index");
                    for(var i=0;i<data.length;i++)
                    {
                        $("#area"+data[i].NodeID+"").bind ("click", function (event)
                        {
                            var title = $(this).attr("src");
                            alert(title);
                            $.mobile.changePage ($("#win2"));
                            $("#win2 div:jqmData(role=content)").empty().append ('<form id="form1" runat="server" rel="external"></form>')
                            $('#form1').empty().append('<iframe id="iframe1" src="'+title+'" frameborder="0" rel="external"></iframe>') 
                        });
                    }       
        });

【讨论】：

【解决方案2】：

这听起来像是同源策略的问题。请参阅此社区 wiki 以获取解决方案：Ways to circumvent the same-origin policy

【讨论】：