我在页面的第三个选项卡上嵌入了地图。
Page here > \'“行程”选项卡
如果在页面仍在加载时直接转到选项卡，则可以完美地加载地图。但是，如果您等到页面完全加载完毕，然后单击“行程”选项卡，则地图将完全缩小，而不是加载到应放在的位置。
我尝试输入所有细节，如
<iframe src="http://ridewithgps.com/routes/1342529/embed" height="500px" width="100%" frameborder="0" http://maps.google.com/maps?ll=43.790716,4.166708&z=8&t=m&hl=en-GB&gl=US&mapclient=apiv3&skstate=action:mps_dialog$apiref:1&output=classic></iframe>
您正在选项卡结构中使用iframe。因此，当页面完全加载时，ITenery选项卡中的iframe将显示none。因此，它没有正确加载缩放的地图
2）当您在加载完成之前切换到ITenery选项卡时，iframe是显示块，即可见，因此它可以正确加载url/映射。
因此，您可以为iframe提供id，比如“#itenary\\u map”。并在单击iTenery选项卡时重新初始化iframe，如下所示
var iframe = document.getElementById("itenary_map");
iframe.src = iframe.src;
jQuery(\'#section-tabs-header li:nth-child(3)\').click(function() { //click on itenary tab
if( !jQuery( \'#itenerary_map\' ).find(\'iframe\').hasClass(\'clicked\') ){//Check if its clicked once or else will reload iframe on every click
jQuery( \'#itenerary_map\' ).find(\'iframe\').attr( \'src\', function ( i, val ) { return val; });
jQuery( \'#itenerary_map\' ).find(\'iframe\').addClass( \'clicked\' ); // add any class to say its clicked
}
});
您可以通过为iframe提供类或id来修改js上面的内容。我以概括的形式写了这篇文章。
出色的响应-只是遇到了一些类似的问题，并进一步改进，使其更具普遍性：
jQuery().ready(function($) {
$(\'.tabs\').tabs();
$(\'.tabs li\').not(\':first\').click(function() {
tab_id=$(this).children(\'a\').attr(\'href\');
iframe_id=$(tab_id).children(\'iframe\').attr(\'id\');
if (!$(\'#\'+iframe_id).hasClass(\'clicked\')) {
$(\'#\'+iframe_id).attr( \'src\', function ( i, val ) { return val; });
$(\'#\'+iframe_id).addClass( \'clicked\' ); // add a class to say its clicked
}
});
});
对我来说，修复方法是为页面中的所有iFrame添加默认宽度样式：
iframe {
width: 100% !important;
}
我不想在我的wordpress主题中包含此脚本，使其根据当前窗口高度调整帖子内所有图像的大小：https://github.com/gutierrezalex/photo-resize我在文本编辑器中创建了一个基本的测试页面，它可以很好地调整图像的大小。然而，当我试图将其应用/包括在我的wordpress主题中时，我根本无法使其发挥作用。