Question

我正在尝试使用jquery在弹出窗口中加载iframe。我使用了此链接中提到的示例。 http://demos.jquerymobile.com/1.4.0/popup-iframe/ 但是，iframe会在同一窗口中加载而不是在弹出窗口中加载，如演示中所示。

我的html文件是

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupMap" data-position-     to="window" data-rel="popup">Open Map</a>
<div id="popupMap" data-role="popup" data-tolerance="15,15" data-theme="a" data-overlay-theme="a" data-corners="false">
<a class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right" href="#" data-rel="back">Close</a>
<iframe width="480" height="320" src="map.html" seamless=""></iframe>
</div>
</body>
</html>

我的main.css文件是

iframe {
border: none;
}

我的main.js文件是

// popup examples
$( document ).on( "pagecreate", function() {
// The window width and height are decreased by 30 to take the tolerance of 15 pixels at each side into account
function scale( width, height, padding, border ) {
    var scrWidth = $( window ).width() - 30,
        scrHeight = $( window ).height() - 30,
        ifrPadding = 2 * padding,
        ifrBorder = 2 * border,
        ifrWidth = width + ifrPadding + ifrBorder,
        ifrHeight = height + ifrPadding + ifrBorder,
        h, w;
    if ( ifrWidth < scrWidth && ifrHeight < scrHeight ) {
        w = ifrWidth;
        h = ifrHeight;
    } else if ( ( ifrWidth / scrWidth ) > ( ifrHeight / scrHeight ) ) {
        w = scrWidth;
        h = ( scrWidth / ifrWidth ) * ifrHeight;
    } else {
        h = scrHeight;
        w = ( scrHeight / ifrHeight ) * ifrWidth;
    }
    return {
        'width': w - ( ifrPadding + ifrBorder ),
        'height': h - ( ifrPadding + ifrBorder )
    };
};
$( ".ui-popup iframe" )
    .attr( "width", 0 )
    .attr( "height", "auto" );
$( "#popupMap iframe" ).contents().find( "#map_canvas" )
    .css( { "width" : 0, "height" : 0 } );
$( "#popupMap" ).on({
    popupbeforeposition: function() {
        var size = scale( 480, 320, 0, 1 ),
            w = size.width,
            h = size.height;
        $( "#popupMap iframe" )
            .attr( "width", w )
            .attr( "height", h );
        $( "#popupMap iframe" ).contents().find( "#map_canvas" )
            .css( { "width": w, "height" : h } );
    },
    popupafterclose: function() {
        $( "#popupMap iframe" )
            .attr( "width", 0 )
            .attr( "height", 0 );
        $( "#popupMap iframe" ).contents().find( "#map_canvas" )
            .css( { "width": 0, "height" : 0 } );
    }
});
});

我使用了链接中提供的完全相同的map.html。

如前所述问题是我无法在弹出窗口中加载iframe。而是在加载页面期间，在按钮下方加载iframe。

解决上述问题后更新。如何修改iframe以在弹出窗口中加载Google方向iframe 这是我想要使用的iframe标签

 <iframe width="480" height="320" src="https://www.google.com/maps/embed/v1/place?key=API_KEY=Space+Needle,Seattle+WA" seamless=""></iframe>

Answer 1

只需将jQuery和jQuery mobile添加到HTML中：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" type="text/css" href="main.css">

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>

<script type="text/javascript" src="main.js"></script>
</head>
<body>
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupMap" data-position-     to="window" data-rel="popup">Open Map</a>
<div id="popupMap" data-role="popup" data-tolerance="15,15" data-theme="a" data-overlay-theme="a" data-corners="false">
<a class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right" href="#" data-rel="back">Close</a>
<iframe width="480" height="320" src="map.html" seamless=""></iframe>
</div>
</body>
</html>

无法使用jquery在弹出窗口中打开iframe

1 个答案: