如何将CSS应用于iframe内容？（css中iframe）

25-03-20 9

如果您想了解如何将CSS应用于iframe内容？的相关知识，那么本文是一篇不可错过的文章，我们将对css中iframe进行全面详尽的解释，并且为您提供关于aframe–如何在iframe中运行WebV

如果您想了解如何将CSS应用于iframe内容？的相关知识，那么本文是一篇不可错过的文章，我们将对css中iframe进行全面详尽的解释，并且为您提供关于aframe – 如何在iframe中运行WebVR内容？、flex 弹窗口嵌套iframe，移动窗体iframe内容不显示了问题处理、Flex嵌套Iframe，点击除Iframe的其他地方后，Iframe内容消失的问题、Flex通过Iframe使用activex控件,点击除Iframe的其他地方后,Iframe内容消失的有价值的信息。

本文目录一览：

如何将CSS应用于iframe内容？（css中iframe）
aframe – 如何在iframe中运行WebVR内容？
flex 弹窗口嵌套iframe，移动窗体iframe内容不显示了问题处理
Flex嵌套Iframe，点击除Iframe的其他地方后，Iframe内容消失的问题
Flex通过Iframe使用activex控件,点击除Iframe的其他地方后,Iframe内容消失

如何将CSS应用于iframe内容？（css中iframe）

我无法获得CSS生成的内容可用于iframe元素：

iframe::after {content: ''example'';}iframe::before {content: ''example'';}

有没有人有一个解决方案实际工作？提前致谢。

答案1

小编典典

您可以使用jQuery的.content()函数来访问它。

$(''yourIframe'').contents().find(''#yourItemYouWantToChange'').css({    opacity: 0,    color: ''purple''});

例

这是一个示例，向我展示了如何将css应用于通常在屏幕左上方找到的jQuery徽标。请注意，它必须是相同的域/端口等，因此这就是我的示例在iframe中使用jsfiddle的原因。

aframe – 如何在iframe中运行WebVR内容？

我有一个A-Frame WebVR场景.我想把它放在一个iframe中.

<iframe src="https://aframe.io/aframe/examples/boilerplate/hello-world/"></iframe>

但是当我进入VR时,它不会全屏显示并呈现给VR耳机.如何在iframe中启用立体VR？

解决方法

您必须在iframe上设置allowvr =“yes”.如果你转到 https://aframe.io,你会看到所有的例子都是iframed,所以你可以按照他们的例子.

<iframe allowvr="yes" src="https://aframe.io/aframe/examples/boilerplate/hello-world/"></iframe>

请注意,这对于移动智能手机来说效果不佳,因为iOS Safari等移动浏览器不允许iframe访问设备方向和设备运动传感器.这可以通过邮件消息传递设备方向数据到iframe来解决.这是在https://github.com/googlevr/webvr-polyfill/issues/173提交的

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内容消失

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