js向当前html页面放入一个新的页面，通过iframe实现

最新推荐文章于 2024-09-11 21:57:53 发布

陌然回首7

最新推荐文章于 2024-09-11 21:57:53 发布

阅读量1.2k

点赞数

文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_35146059/article/details/117666321

版权

本文介绍了如何在HTML页面中使用iframe展示内容。通过JavaScript函数`preview(attachmentId)`，可以将指定ID的附件链接设置到iframe的src属性中，实现页面内预览。同时，若要直接在新窗口打开链接，可以使用`window.open()`方法。这种方法适用于文件预览或内容加载场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在ftl页面中，放入一个iframe标签

<iframe id="attachmentInfo" style="width:100%;" ></iframe>

2.js中增加一个方法，将新页面的链接放入iframe中

function preview(attachmentId) {

		var myIframe = $("#attachmentInfo");
		var url= basePath + "irest/base/commonFileUploadHandler/preview?id="+attachmentId+"&split=1";
		$('#attachmentInfo').attr('src', url);

}

如果是直接打开一个新窗口展示url生成的页面，用一下代码即可

 window.open(basePath + "irest/base/commonFileUploadHandler/preview?id="+attachmentId+"&split=1");

更多可参考
js和jquery给iframe src赋值的3种方法

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

陌然回首7

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

tauri + vue3 如何实现在一个页面上局部加载外部网页？

**My Coding Family**

07-08

1324

ok，以上就是我这期的Bug修复内容啦，如果还想查找更多解决方案，你可以看看我专门收集Bug及提供解决方案的专栏「Bug调优」，都是实战中碰到的Bug，希望对你有所帮助。到此，咱们下期拜拜。码字不易，如果这篇文章对你有所帮助，帮忙给bug菌来个，您的支持就是我坚持写作分享知识点传播技术的最大动力。「猿圈奇妙屋」；以第一手学习bug菌的首发干货，不仅能学习更多技术硬货，还可白嫖最新BAT大厂面试真题、4000G Pdf技术书籍、万份简历/PPT模板、技术文章Markdown文档等海量资料，你想要的我都有。

切换tab动态加载不同的html页面,关于tab的切换之共用html页面,而引发的页面跳转错乱问题...

weixin_39618956的博客

06-05

925

在一个项目中的同一个模块中，有多个tab(并且多个tab对应的页面结构完全一样),tab的每次切换，不同tab调用不同的接口，利用一个switch进行判断，根据当前的类型去调用不同的接口，返回不同数据了，实现页面数据的刷新，这样做的目的是为了减少html页面的重复，实现代码的复用...........................(存在的问题，每次的页面刷新，只是数据的刷新，url没有进行更新，...

参与评论您还未登录，请先登录后发表或查看评论

js通过iframe加载外部网页的实现代码

10-24

主要介绍了js通过iframe加载外部网页的实现代码,需要的朋友可以参考下

使用Jquery向一个空白网页动态创建一个iframe,及嵌入页面,和向嵌入页面传参

热门推荐

lee576的专栏

02-15

1万+

using Microsoft.VisualBasic; using System; using System.Collections; using System.Collections.Generic; using System.Data; using System.Diagnostics; using System.Collections.Specialized; using Microsof

js动态设置iframe并实现页面加载

爱米酱的博客

05-03

6232

//如果没有这个设置，只改变src的值则不会加载页面内容 document.getElementById("id").contentWindow.location.reload(true); document.getElementById("id").src = '地址';

不指定src, 用js生成 iFrame新窗口

細水、長流√的专栏

02-18

1259

有如下需求：要打印页面之中的某个表格，而且还要自动横打（所以用scriptX等控件，因为window.print是竖打）？解决办法：将这部分表格（或者div等）提取出来，专门放到一个新的窗口中去，然后根据这些内容自动生成一个包含打印控件iFrame, 再调用控件的打印方法打印该Ifrme; ____________________________________________________________ 动态生成iframe的代码： ...

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

10-15

在Vue.js中实现嵌套页面通常涉及到使用`iframe`元素来加载外部网页或者内部组件。`iframe`允许我们在一个Vue应用中嵌入另一个独立的HTML文档，这对于展示第三方内容、实现某些特定功能或者处理复杂交互场景时非常...

通过iframe实现在body中放frameset

12-14

在网页设计中，`frameset` 和 `body` ...通过创建一个全屏的`iframe`并指向包含`frameset`的页面，实现了在`body`中呈现多框架布局的效果。虽然这种方法有一些潜在的问题，但在特定情况下，它仍是一种实用的解决方案。

用showModalDialog弹出页面后，提交表单总是弹出一个新窗口

09-05

在`showModalDialog`弹出的页面内，将表单放入一个IFrame（内联框架）中。这样，表单的提交行为将局限于IFrame内部，不会影响到父窗口或新开窗口。你可以通过设置IFrame的`src`属性来加载表单页面，并且确保表单的`...

JS如何打开新的页面、服务中使用iframe如何改变iframe的路径、iframe页面如何让整个父页面跳转、window.open()方法详解

马脸男的博客

06-13

4167

方法是 JavaScript 中的一个内置方法，用于在浏览器中打开一个新的窗口或标签页。需要注意的是，由于弹出窗口的滥用已经成为了一个安全问题，现代浏览器通常会默认阻止 window.open() 方法的调用，除非是在用户的交互下触发的。因此，在实际的开发中，我们需要谨慎使用这个方法，避免被浏览器误认为是恶意行为。

js 主页面给iframe嵌套页面添加内容

IT侠客行的博客

12-01

2345

此功能需要在服务环境下运行项目，否则可能会出现下面的报错：如果报以上错误，把iframe和父页面代码都放入工程项目中在本地跑起来即可解决同源问题。 js代码: functiongetIframe(id){ returndocument.getElementById(id).contentWindow.document; } functionframeDiv(){ getIframe("smallFrame").getElementById("textID"...

【js】让链接在指定的iframe中跳转显示，实现链接内容不刷新父页面显示到iframe中

向着光芒的女孩

04-21

7320

例子：点击某一个链接，想通过js代码跳转到父页面的某个iframe中，实现不刷新父页面在iframe中显示链接内容 <a>显示内容</a> <iframe frameborder="0" width="100%" height="100%" name="showList" scrolling="auto" style="background-color:transparent" >

JS -- 如何借助 url 由一个页面像另一个页面传递参数（两种方式）& 新增、移除面包屑 -- 7

支棱起来

09-03

824

跳转方法{ var url ="/acl_**_topo/pages/rootcause/rootcauseMgmt.jsp?topoId=" + topoMapId; top.navigatorTop.jumpTo({name:'根源告警配置',url:url}); }); } <% String topoId = request.getParameter("topoId"); %> <script type="text/javascript"> var t

js之iframe父、子页面通信

考拉很OK

11-27

1182

一般先加载完父页面才会去加载子页面，所以：必须要确保在iframe加载完成后再进行操作，如果iframe还未加载完成就开始调用里面的方法或变量，会产生错误。判断iframe是否加载完成有两种方法：1. iframe上用onload事件2. 用document.readyState=="complete"来判断。

html界面出现 section,如何在HTML5中正确使用“ section”标签？

weixin_42414947的博客

06-09

1579

标记的正确方法是什么？从技术上讲，两者都是正确的。我要说的是，这两个示例看起来都不正确……但是很难用纯文本而不是真实上下文来说明，因为是语义标记，而不是像这样的通用包装。您当然不应该有两个具有相同ID的元素(section或其他)。答案是在当前规范中：The section element represents a generic section of a document orapplicati...

一篇很全面的freemarker教程

nojob1year的博客

11-20

3612

copy自[url]http://demojava.iteye.com/blog/800204[/url] 以下内容全部是网上收集： FreeMarker的模板文件并不比HTML页面复杂多少,FreeMarker模板文件主要由如下4个部分组成: 1,文本:直接输出的部分 2,注释:格式部分,不会输出 3,插值:即${...}或#{...}格式的部分,将使用数据模型中的部分替代输出...

iframe详解和用途解读