在指定的元素上window.open(),about:_blank 取消事先的链接

 src 的 about:_blank 取消事先的链接。

<script lang="ts" setup>

const openURL = ()=>{
    window.open("www.abc.jpg", 'frame', 'width=800px,height=800px')
}
</script>
<template>
<div name="frame">
 <iframe 
src="about:_blank" 
width="1000px" 
height="1000px" 
frameborder="1" 
scrolling="no" 
name="frame">112
</iframe>
</div>
    <el-button type="primary" :icon="Edit" 
@click="openURL">Edit Template</el-button>
</template>

### 关于 `window.open` 方法的使用说明 #### 参数详解 `window.open()` 是用于打开新浏览器窗口或标签页的方法。此方法接受四个主要参数: - **url**: 要加载的新文档 URL 字符串,如果为空字符串,则创建空白窗口。 - **target**: 新窗口的名字,默认为 `_blank` 表示新开一个标签页;也可以指定其他名称以便后续操作该窗口[^3]。 ```javascript // 打开一个新的页面并命名为 'newWindow' let newWin = window.open('https://example.com', '_blank'); ``` - **features (可选)**: 定义新窗口外观特征的一系列逗号分隔的关键字列表,如宽度、高度等属性设置[^4]。 ```javascript // 设置弹窗尺寸和其他特性 const features = "width=800,height=600,left=100,top=50,menubar=no,status=yes"; window.open('http://www.example.org/', '', features); ``` - **replace (布尔型 可选)**: 若设为 true 则会在浏览历史记录中替换当前条目而不是添加新的条目。 ```javascript // 替换当前的历史记录项而不增加新的一项 window.open('/about.html', '_self', '', true); ``` #### 返回值解释 当调用 `window.open()` 后返回的是指向新窗口对象的一个引用,这使得可以在父窗口通过这个引用与子窗口进行通信和控制。 ```javascript var popup = window.open("popup.html", "myPopup"); if (!popup || popup.closed || typeof popup === 'undefined') { console.error("无法打开弹出窗口,请检查是否被阻止."); } else { setTimeout(() => { popup.focus(); }, 50); // 将焦点移至新窗口 } ``` #### 实际应用场景下的例子 下面是一个实际应用的例子,展示了如何利用 `window.open()` 来处理跨域消息传递的情况[^1]。 假设有一个主页面想要向另一个域名上的弹出窗口发送数据: ```html <!-- 主页面 --> <button id="sendData">Send Data</button> <script type="text/javascript"> document.getElementById('sendData').addEventListener('click', function () { var childWindow = window.open('https://otherdomain.com/receiver.html', '_blank'); // 延迟确保目标页面已完全加载完毕再尝试发消息 setTimeout(function(){ try{ childWindow.postMessage({message:'Hello'}, '*'); // 发送 JSON 对象给接收者 } catch(e){ alert('Error occurred while trying to send message.'); } }, 2000); }); </script> ``` 而在接收端(即 `receiver.html`),可以监听来自外部的消息事件,并作出相应反应: ```html <!-- 接收页面 receiver.html --> <script type="text/javascript"> window.addEventListener('message', receiveMessage, false); function receiveMessage(event) { // 验证来源的安全性很重要!这里简化了验证过程 if (event.origin !== "https://yourmainpage.com") return; console.log(`Received ${JSON.stringify(event.data)} from parent`); // 进一步处理接收到的数据... } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值