`
japankn
  • 浏览: 213359 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

给iframe中添加内容

阅读更多

    在项目中使用fckeditor,一开始定义了自己的模板,让用户自行选择导入,后来用户要求,把一些基础内容都先预先填好,后来查阅了相关资料,没有解决了。

    那现在再想一下用户的需求,用户最终希望能够使用样式定好的模板,填写相关信息,然后进行报告的预览和打印。

    那么我们就可以把填写的内容和显示的功能分开来操作,填写内容用我们一般的表单,显示我们就用另一个页面直接承载定制好的样式,把传过来的内容填充进去不久可以了,在显示页,用户预览的同时,也可以对其进行打印。

    为了实现,我们可能要将之前一个fckeditor编辑区,在填写页面弄多个,然后在显示页将编辑的内容再显示出来。

    我们知道fckeditor本质是使用iframe的,所以我们在显示页,将内容也放在iframe中,就可以了。

<iframe id="diaofimage" width="583" height="300" frameborder="0"
           scrolling="auto" style="border: 1px solid gray"></iframe>

 

javascritp调用代码

//IE

diaofimage.document.write("<b>孙健</b>");

//FireFox

desofimage.contentWindow.document.write("asdfasdf");

 

当然,为了判断浏览器类型,我们再添加一段javascript代码作为判断的标准

var Brower={
    // 判断是否为IE6浏览器
    isIE6:navigator.userAgent.search('MSIE')>0&&navigator.userAgent.search('6')>0,
    // 判断是否为IE浏览器
    isIE:navigator.userAgent.search('MSIE')>0,
    // 判断是否为Opera浏览器
    isOpera:navigator.userAgent.indexOf('Opera')>-1,
    // 判断是否为FireFox浏览器
    isMoz:navigator.userAgent.indexOf('Mozilla/5.')>-1
   }

分享到:
评论

相关推荐

    在iframe 中页面中设置遮罩遮罩层

    在网页设计中,有时我们需要在页面中添加一个遮罩层,以实现如加载动画、弹窗提示或隐藏部分内容的效果。本话题将详细讲解如何在iframe中实现页面的遮罩层功能,结合`right.html`, `main.html`, `left.html`, `top....

    动态创建iframe,并动态添加js执行代码

    // 将iframe添加到页面的某个元素后面,例如body document.body.appendChild(iframe); ``` 接下来,我们讨论动态添加JavaScript代码。这通常涉及到`document.write`、`innerHTML`、`createElement`和`appendChild`...

    jquery iframe动态添加删除tab选项卡

    jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe动态添加tab选项卡 jquery iframe...

    iframe根据页面内容自适应高度和宽度

    在网页开发中,`iframe`(Inline Frame)是一种嵌入其他网页的标签,常用于将外部内容如视频、地图或文章等内容嵌入到当前页面中。然而,由于`iframe`的大小固定,当嵌入的页面内容高度或宽度超过`iframe`设定的尺寸...

    iframe中页面显示不全1

    当遇到"Iframe中页面显示不全"的问题时,通常是由于iframe的尺寸设置不当或者与被嵌入内容的尺寸不匹配导致的。下面将详细探讨如何解决这一问题以及相关的知识点。 首先,我们需要了解`&lt;iframe&gt;`的基本结构和属性。...

    js调用iframe实现打印页面内容的方法

    4. 将iframe添加到页面的body中,并获取iframe的contentWindow.document对象,为打印做准备。 5. 将打印区域的内容写入iframe的文档中,可以通过添加link元素引入打印专用的CSS样式。 6. 将iframe聚焦,并调用`print...

    js弹出div层模拟alert(可以在iframe中使用)

    我们检查当前窗口是否在iframe内,如果是,我们将自定义的div层添加到iframe的body元素中,以确保它覆盖整个页面,而不仅仅是iframe的内容。 现在,你可以像使用原生alert一样使用这个自定义的弹出层: ```...

    IFrame中Session丢失的解决办法

    在探讨“IFrame中Session丢失的解决办法”这一主题时,我们首先需要理解Session与IFrame的基本概念及其在Web开发中的交互方式。Session是Web应用中用于存储用户特定信息的一种机制,它允许开发者在用户的会话期间...

    Flex中利用IFrame解决嵌入HTML时Flex组件被遮挡和IFrame被隐藏的问题

    1. **Flex组件被遮挡**:由于Flex和HTML的渲染机制不同,当HTML内容被加载到IFrame中时,可能会覆盖Flex组件,导致菜单、弹出界面或右键菜单等不可见。解决这个问题的关键在于调整Z-index,即设置IFrame和Flex组件的...

    vue给页面添加水印,或者给iframe添加水印

    vue给页面添加水印,或者给iframe添加水印

    拖拽一个iframe中的div 在另一个iframe页面中显示

    1. **初始化拖放**:在第一个iframe中,为需要拖动的div设置`draggable="true"`,并添加相应的事件监听器,如`ondragstart`来捕获拖动开始时的信息。 2. **封装数据**:在`ondragstart`事件中,可以将div的ID或其他...

    js 实现 动态添加iframe框架

    js 实现 动态添加iframe框架! 值得下载看看!资源免费,大家分享!!

    用iframe提交表单,主要是将表单提交到iframe中,可实现无刷新提交。

    用iframe提交表单,主要是将表单提交到iframe中,可实现无刷新提交。 html页面: &lt;iframe name="FORMSUBMIT" width="1" height="1" &gt;&lt;/iframe&gt; ...

    div被iframe遮住的几种情况及解决方法

    解决这个问题的一个方法是在IFRAME的URL参数中添加wmode=opaque,这样可以改变IFRAME的窗口模式,从而避免其影响到其他元素的Z-index层级。类似地,当IFRAME内嵌Flash对象时,也可能出现z-index失效的问题。这时,...

    asp.net 中使用iframe动态加载页面

    在 ASPX 页面中添加 iframe 元素,用于加载外部页面或资源。例如: ``` &lt;IFRAME id="frame1" src="SourcePage.extension / URL of the external Site" scrolling="auto" runat="server"&gt;&lt;/IFRAME&gt; ``` 其中,src ...

    在vue中实现嵌套页面(iframe)

    `iframe`允许我们在一个Vue应用中嵌入另一个独立的HTML文档,这对于展示第三方内容、实现某些特定功能或者处理复杂交互场景时非常有用。在Vue中使用`iframe`,我们可以直接在模板中插入`iframe`标签,并设置相应的...

    完全搞定iframe(框架)里的滚动条.doc

    例如,在A页面的iframe标签中添加`scrolling="auto"`可以自动根据内容显示滚动条。 ### 使用JavaScript解决滚动条问题 对于第二种情况,即允许iframe根据内容自动伸展的情况,推荐使用JavaScript来动态调整iframe的...

    捕捉IFrame SRC改变事件

    然而,在使用`&lt;iframe&gt;`时,有时我们需要监测其内容的变化,特别是当`&lt;iframe&gt;`中的源地址(src属性)发生改变时。 #### 1. 使用`window.onbeforeunload`事件监测IFrame内容变化 根据提供的代码示例,主要关注点...

    iframe高度自适应.pdf

    在这个例子中,我们为`body`元素添加了`onload`和`onresize`事件处理器,当页面加载完成或窗口大小发生变化时会调用`handleFrameLoad()`函数。 ##### 内部页面 ```html ; margin:0px; padding:0px"&gt; ...

    js iframe 打印 打印预览 页眉页脚的设置

    在JavaScript中,可以使用`iframe.contentDocument`访问iframe的DOM,从而修改其内容,包括添加页眉和页脚元素。例如: ```javascript var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; ...

Global site tag (gtag.js) - Google Analytics