IFRAME

本文介绍了一个使用Flex与IFrame集成的应用示例,通过该示例可以了解如何利用Flex构建包含动态加载内容的界面。示例中包括了树形菜单导航与相应内容区域的动态加载实现。
[url]http://www.deitte.com/IFrameDemo3/IFrameDemo.html[/url]



<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" creationComplete="iFrame.visible=true" viewSourceURL="srcview/index.html">

<mx:HBox width="100%" height="100%">

<mx:Panel title="Tree" width="200" height="100%" roundedBottomCorners="true">
<mx:Tree id="tree" width="100%" height="100%" dataProvider="{treeData}"
labelField="@label" showRoot="false"
change="iFrame.source = (Tree(event.target).selectedItem.attribute('path').toString());" />
</mx:Panel>

<mx:Panel width="100%" height="100%" title="Content" paddingTop="1" paddingBottom="1" paddingLeft="1" paddingRight="1" >
<IFrame id="iFrame" source="http://www.adobe.com/devnet/flex/" width="100%" height="100%" />
<mx:ControlBar>
<mx:CheckBox id="cbVisible" label="IFrame Visible" selected="true" click="iFrame.visible=cbVisible.selected"/>
</mx:ControlBar>
</mx:Panel>

</mx:HBox>

<mx:XMLList id="treeData">
<node label="Flex Resources">
<node label="Flex Developer Center" path="http://www.adobe.com/devnet/flex/" />
<node label="Flex Team Blog" path="http://weblogs.macromedia.com/flexteam/" />
<node label="Flex Blogs on MXNA" path="http://weblogs.macromedia.com/mxna/FeedList.cfm#Flex" />
<!-- these sites pop themselves out of a frame:
<node label="flex.org" path="http://www.flex.org" />
<node label="Adobe Labs" path="http://labs.adobe.com/wiki/index.php/Main_Page" />
-->
</node>
<node label="Search">
<node label="Google" path="http://www.google.com" />
<node label="Yahoo" path="http://www.yahoo.com" />
</node>
</mx:XMLList>

</mx:Application>



<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
resize="callLater(moveIFrame)"
move="callLater(moveIFrame)">

<mx:Script>
<![CDATA[

import flash.external.ExternalInterface;
import flash.geom.Point;
import flash.net.navigateToURL;

private var __source: String;

/**
* Move iframe through ExternalInterface. The location is determined using localToGlobal()
* on a Point in the Canvas.
**/
private function moveIFrame(): void
{

var localPt:Point = new Point(0, 0);
var globalPt:Point = this.localToGlobal(localPt);

ExternalInterface.call("moveIFrame", globalPt.x, globalPt.y, this.width, this.height);
}

/**
* The source URL for the IFrame. When set, the URL is loaded through ExternalInterface.
**/
public function set source(source: String): void
{
if (source)
{

if (! ExternalInterface.available)
{
throw new Error("ExternalInterface is not available in this container. Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.");
}
__source = source;
ExternalInterface.call("loadIFrame", source);
moveIFrame();
}
}

public function get source(): String
{
return __source;
}

/**
* Whether the IFrame is visible.
**/
override public function set visible(visible: Boolean): void
{
super.visible=visible;

if (visible)
{
ExternalInterface.call("showIFrame");
}
else
{
ExternalInterface.call("hideIFrame");
}
}

]]>
</mx:Script>

</mx:Canvas>



<!-- saved from url=(0014)about:internet --> 

<!--
Most of this file is HTML/JavaScript that was generated by Flex Builder. The pieces added:

1. wmode set to opaque
2. the moveIFrame,hideIFrame,showIFrame,loadIFrame methods
3. the 'myFrame' div

I also commented out the history feature, but I think it could be integrated into this page.

8/20/06 Brian Deitte
-->

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="AC_OETags.js" language="javascript"></script>
<style>
body { margin: 0px; overflow:hidden }
</style>

<script language="JavaScript" type="text/javascript">

// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 0;

function moveIFrame(x,y,w,h) {
var frameRef=document.getElementById("myFrame");
frameRef.style.left=x;
frameRef.style.top=y;
var iFrameRef=document.getElementById("myIFrame");
iFrameRef.width=w;
iFrameRef.height=h;
}

function hideIFrame(){
document.getElementById("myFrame").style.visibility="hidden";
}

function showIFrame(){
document.getElementById("myFrame").style.visibility="visible";
}

function loadIFrame(url){
document.getElementById("myFrame").innerHTML = "<iframe id='myIFrame' src='" + url + "'frameborder='0'></iframe>";
}

</script>


</head>

<body scroll="no">
<!-- <script language="JavaScript" type="text/javascript" src="history.js"></script> -->
<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, 0, 65);

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

// Check to see if a player with Flash Product Install is available and the version does not meet the requirements for playback
if ( hasProductInstall && !hasRequestedVersion ) {
// MMdoctitle is the stored document.title value used by the installation process to close the window that started the process
// This is necessary in order to close browser windows that are still utilizing the older version of the player after installation has completed
// 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", "100%",
"height", "100%",
"align", "middle",
"id", "IFrameDemo",
"quality", "high",
"bgcolor", "#869ca7",
"name", "IFrameDemo",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);

} else if (hasRequestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
"src", "IFrameDemo",
"width", "100%",
"height", "100%",
"align", "middle",
"id", "IFrameDemo",
"quality", "high",
"bgcolor", "#869ca7",
"name", "IFrameDemo",
// "flashvars",'historyUrl=history.htm%3F&lconid=' + lc_id + '',
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer",
"wmode", "opaque"
);
} else { // flash is too old or we can't detect the plugin
var alternateContent = '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="IFrameDemo" width="100%" height="100%"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="IFrameDemo.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="IFrameDemo.swf" quality="high" bgcolor="#869ca7"
width="100%" height="100%" name="IFrameDemo" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
wmode="opaque"
</embed>
</object>
</noscript>

<!--
<iframe name="_history" src="history.htm" frameborder="0" scrolling="no" width="22" height="0"></iframe>
-->
<div id="myFrame" style="position:absolute;background-color:transparent;border:0px;visibility:hidden;"></div>

</body>

</html>


[url]http://code.google.com/p/flex-iframe/source/checkout[/url]
06-18
### iframe 的基本用法 `iframe` 是 HTML 中的一个标签,用于在当前页面中嵌入另一个 HTML 页面。它允许开发者在一个网页中显示另一个独立的网页内容,而不需要跳转到新页面。 #### 基本语法 ```html <iframe src="https://example.com" width="600" height="400"></iframe> ``` - `src`: 指定嵌入页面的 URL。 - `width` 和 `height`: 设置 iframe 的宽度和高度。 - 其他属性如 `name`, `sandbox`, `allowfullscreen` 等可以进一步增强安全性或功能[^1]。 --- ### iframe 常见问题及解决方案 #### 1. 跨域问题 当使用 iframe 加载跨域资源时,可能会遇到权限限制,例如无法访问 iframe 内部的内容或打印 PDF 时出现错误。解决方法之一是将跨域资源转换为同源资源,例如通过 Blob URL 实现。 示例代码如下: ```javascript fetch(&#39;https://example.com/sample.pdf&#39;) .then(response => response.blob()) .then(blob => { const blobUrl = URL.createObjectURL(blob); document.getElementById(&#39;printMe&#39;).src = blobUrl; }); ``` 通过上述代码,PDF 文件被加载为 Blob 对象,并生成一个临时的同源 URL,从而避免跨域限制[^1]。 --- #### 2. Vue 中动态切换 iframe 的问题 在 Vue 项目中,如果需要动态加载不同的 iframe 并保留其状态,则可以通过以下方式实现: - 使用 `v-if` 或 `v-show` 控制 iframe 的显示状态,而不是直接更改 `src` 属性。 - 将 iframe 放置在一个固定区域,仅通过 Vue 的路由参数动态更新其内容。 示例代码如下: ```vue <template> <div> <iframe :src="currentUrl" width="100%" height="700px"></iframe> </div> </template> <script> export default { data() { return { currentUrl: &#39;https://example.com/page1&#39;, }; }, methods: { changeIframe(url) { this.currentUrl = url; }, }, }; </script> ``` 这种方式可以避免因路由切换导致 iframe 内容重新加载的问题[^2]。 --- #### 3. iframe 自适应高度 默认情况下,iframe 的高度是固定的,可能导致部分内容被截断。可以通过 JavaScript 动态调整 iframe 的高度以适配其内容。 示例代码如下: ```javascript function adjustIframeHeight(iframeId) { const iframe = document.getElementById(iframeId); iframe.onload = function () { iframe.style.height = iframe.contentWindow.document.body.scrollHeight + &#39;px&#39;; }; } adjustIframeHeight(&#39;myIframe&#39;); ``` --- #### 4. 安全性问题 为了防止潜在的安全风险(如 XSS 攻击),可以使用 `sandbox` 属性限制 iframe 的行为。 示例代码如下: ```html <iframe src="https://example.com" sandbox="allow-scripts allow-same-origin"></iframe> ``` - `allow-scripts`: 允许执行脚本。 - `allow-same-origin`: 允许 iframe 访问其自身的同源资源。 --- ### 总结 iframe 是一种强大的工具,但在实际开发中需要注意跨域、性能优化和安全性等问题。通过合理使用 Blob URL、Vue 动态控制以及自适应高度等技术,可以有效解决常见的 iframe 问题[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值