微信页面弹出键盘后iframe内容变空白详解（微信打开键盘一下又弹回去了）

25-03-01 12

针对微信页面弹出键盘后iframe内容变空白详解和微信打开键盘一下又弹回去了这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展Facebookiframe链接仅在iframe内打开、flex弹

针对微信页面弹出键盘后iframe内容变空白详解和微信打开键盘一下又弹回去了这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展Facebook iframe链接仅在iframe内打开、flex 弹窗口嵌套iframe，移动窗体iframe内容不显示了问题处理、Flex嵌套Iframe，点击除Iframe的其他地方后，Iframe内容消失的问题、Flex通过Iframe使用activex控件,点击除Iframe的其他地方后,Iframe内容消失等相关知识，希望可以帮助到你。

本文目录一览：

微信页面弹出键盘后iframe内容变空白详解（微信打开键盘一下又弹回去了）
Facebook iframe链接仅在iframe内打开
flex 弹窗口嵌套iframe，移动窗体iframe内容不显示了问题处理
Flex嵌套Iframe，点击除Iframe的其他地方后，Iframe内容消失的问题
Flex通过Iframe使用activex控件,点击除Iframe的其他地方后,Iframe内容消失

微信页面弹出键盘后iframe内容变空白详解（微信打开键盘一下又弹回去了）

本文主要和大家分享微信页面弹出键盘后iframe内容变空白详解，当键盘弹出后，页脚也被顶起来；而当搜索完（要刷新整体页面），键盘缩回后，iframe里键盘当住的地方变成白色。怎么解决这个问题呢？希望本文能帮助到大家。

前言：

因为iframe要适配，so，高度要计算出来

//整体高
var win = $(window).height();
//搜索栏
var header = $(&#39;header&#39;).height();
//导航栏
var nav = $(&#39;.navpwrap&#39;).height();
//页底
var footer = $(&#39;footer&#39;).height();
//iframe
$(&#39;#main&#39;).height(win -header + nav - footer);

登录后复制

解决方案：

原因：

当键盘放下后，iframe的高度没有再重新设置而导致的。

方案① ：将首次iframe的高度放在cookie里

注意：在小米6 中，''win'' 貌似冲突了，so 改 ‘win1''

//导入
<script src="jquery.cookie.js"></script>
var win = $(window).height();
//获取cookie里
var winCookie = $.cookie("win1",{path: &#39;/&#39; });
//若cookie里无，则填充；若cookie里有，则取出
if(!winCookie){
 $.cookie("win1", win,{path: &#39;/&#39; });
}else{
 win = winCookie;
}

登录后复制

如何解决Facebook iframe链接仅在iframe内打开？

| 我觉得人们一直在与这个问题相反，我无法弄清楚如何在fb之外而不是在iframe之外打开链接。.我正在发布驻留在服务器托管的FB应用程序中的资料。该页面具有指向其他站点的链接，但是当它们打开时，它们仍在facebook iframe中。使用基本：

<a href= \"http....\"><b>Blank.com</b>

看起来像这样点击链接... 我是菜鸟，任何帮助都会很棒。谢谢

解决方法

如果您已为iframe设置了一个应用程序，target = \“ _ blank \”将起作用。 , 您是否尝试过“ 1”属性？

<a href=\"http://www.example.com\" target=\"_blank\">example.com</a>

flex 弹窗口嵌套iframe，移动窗体iframe内容不显示了问题处理

一，弹框设置：

创建titlewindow组件内嵌套iframe，名称为UrlForm

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"

...

close="PopUpManager.removePopUp(this);"

initialize="init()"

move="titlewindow1_moveHandler(event)">

<fx:Declarations>

<fx:String id="url"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.core.Container;
import mx.events.MoveEvent;
import mx.managers.PopUpManager;
private function init():void
{
ifra.source =url;
}

//窗体移动时，iframe可以跟着移动。若不加此方法则无法移动iframe,因为iframe是div
protected function titlewindow1_moveHandler(event:MoveEvent):void
{
//标记组件，以便在稍后屏幕更新期间调用该组件的 updatedisplayList() 方法。
ifra.invalidatedisplayList();
}

]]>
</fx:Script>

<flexiframe:IFrame id="ifra" width="850" height="520" horizontalCenter="0" source="" />

</s:TitleWindow>

主窗体调用弹窗体：script代码

var urlF:UrlForm=new UrlForm();

urlF.url="http://www.baidu.com";
//下面的代码可以起到居中弹出的效果；
urlF.x=FlexGlobals.topLevelApplication.stage.stageWidth/2- urlF.width/2;
urlF.y=FlexGlobals.topLevelApplication.stage.stageHeight/2- urlF.height/2;

PopUpManager.addPopUp(urlF,map,true);
PopUpManager.centerPopUp(urlF);

二，移动窗体iframe内容不显示了问题处理：

在模板index.template.html 中的：

1，script脚本加入

params.wmode = "transparent";

如下：

var params = {};
params.quality = "high";
params.bgcolor = "${bgcolor}";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
params.wmode = "transparent";

2，<noscript>中加入

如下：

<object ....

...

ok,完成

若是要修改iframe的背景色，则需要找到iframe源码中的IFrameExternalCalls.as中的：

"newDiv.style.backgroundColor = '#FFFFFF';"

修改为要设置的颜色

Flex嵌套Iframe，点击除Iframe的其他地方后，Iframe内容消失的问题

今天遇到一个很让人闹心的问题，就是我的Flex中为了嵌套一个jsp，所以在flex中嵌套一个包含JSP页面的Iframe。问题出现了，当我点击除了Iframe的其他地方的时候，Iframe中的内容全部消失了。刚开始我还困惑到底是怎么回事，后来才发现这个问题是完全可以解决的。解决的方法如下:

在index.template.html中更改一个属性，index.template.html在你的flex工程下，目录为：工程名\html-template\index.template.html。打开后，查看window的属性"wmode"，看到后，将其值更改为"transparent"。一般一共会有三个地方。更改完后保存，重新编译，启动工程，成功！

具体的代码如下:（注意红色字体）

<html lang="en">

<!--
Smart developers always View Source.

This application was built using Adobe Flex,an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR.

Learn more about Flex at http://flex.org
// -->

<link rel="stylesheet" type="text/css" href="history/history.css" />

<title>${title}</title>
<script src="AC_OETags.js" language="javascript"></script>

<script src="history/history.js" language="javascript"></script>

<body scroll="no">
<script language="JavaScript" type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6,65);

// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion,requiredMinorVersion,requiredRevision);

if ( hasProductInstall && !hasRequestedVersion ) {
// DO NOT MODIFY THE FOLLOWING FOUR LInes
// Location visited after installation is complete if installation is required
var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
var MMredirectURL = window.location;
document.title = document.title.slice(0,47) + " - Flash Player Installation";
var MMdoctitle = document.title;

AC_FL_runcontent(
  "src","playerProductInstall",
  "FlashVars","MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
  "width","${width}",
  "height","${height}",
  "align","middle",
  "id","${application}",
  "quality","high",
  "bgcolor","${bgcolor}",
  "name",
  "allowScriptAccess","sameDomain",
  "type","application/x-shockwave-flash",
  "wmode","transparent",
  "pluginspage","http://www.adobe.com/go/getflashplayer"
);
} else if (hasRequestedVersion) {
// if we've detected an acceptable version   transparent
// embed the Flash Content SWF when all tests are passed
AC_FL_runcontent(
   "src","${swf}",
   "width",
   "height",
   "align",
   "id",
   "quality",
   "bgcolor",
   "name",
   "allowScriptAccess",
   "type",
   "wmode",
   "pluginspage","http://www.adobe.com/go/getflashplayer"
);
} else { // flash is too old or we can't detect the plugin
    var alternateContent = 'Alternate HTML content should be placed here. '
+ 'This content requires the Adobe Flash Player. '
   + '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
    document.write(alternateContent); // insert non-flash content
}
// -->
</script>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   id="${application}" width="${width}" height="${height}"
   codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
   <param name="movie" value="${swf}.swf" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="${bgcolor}" />
   <param name="allowScriptAccess" value="sameDomain" />
   <embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
    width="${width}" height="${height}" name="${application}" align="middle"
    play="true"
    loop="false"
    quality="high"
    allowScriptAccess="sameDomain"
    type="application/x-shockwave-flash"
    pluginspage="http://www.adobe.com/go/getflashplayer" wmode="transparent">    </embed> </object> </noscript> </body> </html>

Flex通过Iframe使用activex控件,点击除Iframe的其他地方后,Iframe内容消失

解决办法如下(此办法是网上其他地方提出的，使用后果然可以解决以上问题)：