iframe & cors
iframe & cors
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="xgqfrms">
<meta name="generator" content="VS code">
<title>window.open() & iframe</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
[data-dom="alink"]{
color: #0f0;
cursor: pointer;
}
[data-dom="ul"]{
height: 80vh;
overflow: auto;
}
[data-layout="left"],
[data-layout="right"],
[data-layout="center"] {
float: left;
}
[data-layout="left"] {
width: calc(20vw);
border: 1px solid #666;
}
[data-layout="right"] {
margin-right: 10px;
width: calc(37vw);
/* border: 1px solid #ccc; */
}
[data-layout="center"] {
margin-right: 10px;
height: 80vh;
width: calc(30vw);
/* border: 1px solid #0f0; */
}
[data-dom="iframe"] {
border: 1px solid red;
}
[data-dom="btn"] {
border: 1px solid #39f;
color: #666;
border-radius: 5px;
line-height: 23px;
font-size: 14px;
padding: 12px;
margin: 5px;
cursor: pointer;
}
[data-dom="btn"]:hover {
border: 1px solid #0f0;
color: #000;
}
</style>
</head>
<body>
<section>
<div data-layout="header">
<button data-dom="btn" onclick="importLinks()">导入测试资讯链接</button>
<button data-dom="btn" onclick="showLinks()">一键生成资讯链接</button>
</div>
<div data-layout="left">
<ol data-dom="ul"></ol>
<!-- <ul data-dom="ul"></ul> -->
</div>
<div data-layout="center">
<textarea
data-dom="textarea"
style="font-size: 14px;"
cols="75"
rows="42"
autofocus
title="请输入要测试的资讯 URL 列表(注意: URL \n 换行分割)!"
placeholder="请输入要测试的资讯 URL 列表(注意: URL \n 换行分割)!">
</textarea>
</div>
<div data-layout="right">
<iframe
name="iframeWindow"
src=""
width="600"
height="800"
data-dom="iframe"
>
</iframe>
</div>
</section>
<script>
const importLinks = () => {
let textarea = document.querySelector(`[data-dom="textarea"]`);
links = ["https://photo.sina.cn", "https://nba.sina.cn/", "https://tech.sina.cn/"];
let alinks = links.join(`\n`) || ``;
textarea.value = ``;
textarea.value = `${alinks}`;
// textarea.insertAdjacentHTML(`beforeend`, alinks);
};
const getLinks = () => {
let textarea = document.querySelector(`[data-dom="textarea"]`);
let links =[];
if (textarea.value.includes(`\n`)) {
links = textarea.value.split(`\n`);
} else {
// alert(`请先输入要测试的资讯 URL 列表!`);
}
// console.log(`links =`, links);
return links;
};
const autoOpenIframe = (link = ``) => {
// window.open(URL, name, specs, replace);
if (link) {
let iframe = document.querySelector(`[data-dom="iframe"]`);
// console.log(`iframe =`, iframe);
// console.log(`link =`, link);
iframe.src = `${link}`;
// // let iframeWindow = window.open(`${link}`, "iframeWindow", "width=600, height=400", false);
// // window.open(`${link}`, "iframe", "width=600, height=400", false);
// let iframeWindow = window.open("", "iframeWindow", "width=600, height=400", false);
// // iframeWindow.document.write(`<iframe name="${link}" src="${link}"></iframe>`);
// // iframeWindow.document.write(``);
// iframeWindow.document.write(`
// <iframe
// name="${link}"
// src="${link}"
// width="600"
// height="400"
// >
// </iframe>
// `);
}
// destroy window ???
};
const showLinks = () => {
let links = getLinks();
let ul = document.querySelector(`[data-dom="ul"]`);
let lis = ``;
if (links.length) {
links.forEach(
(link, i) => {
lis += `
<li>
<span data-link="${link}" data-dom="alink">${link}</span>
</li>
`;
}
);
ul.insertAdjacentHTML(`beforeend`, lis);
setTimeout(() => {
let alinks = [...document.querySelectorAll(`[data-dom="alink"]`)];
alinks.forEach(
(alink, i) => {
let onceFlag = alink.dataset.onceFlag || false;
if (!onceFlag) {
alink.dataset.onceFlag = true;
alink.addEventListener(`click`, () => {
let link = alink.dataset.link || ``;
alink.style.color = "#f00";
autoOpenIframe(link);
});
}
}
);
}, 0);
} else {
alert(`请先输入要测试的资讯 URL 列表!`);
}
};
</script>
</body>
</html>
<!--
https://photo.sina.cn
https://nba.sina.cn/
https://tech.sina.cn/
-->
CORS
iframe
document.domain
https://segmentfault.com/a/1190000000702539
postMessage
HTML5
X-Frame-Options
Refused to display 'https://www.zhihu.com/signup?next=%2F' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
iframe & HTTPS & CORS
https://iframe.xgqfrms.xyz/eapp/index.html#blog.sina.cn
iframe & cors的更多相关文章
- X-Frame-Options & iframe & CORS
X-Frame-Options & iframe & CORS https://github.com/xgqfrms/FEIQA/issues/23 X-Frame-Options i ...
- Spring Boot Web应用开发 CORS 跨域请求支持：
Spring Boot Web应用开发 CORS 跨域请求支持: 一.Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等CORS与JSONP相比 1. JSONP只能实现 ...
- CORS & X-Frame-Options
CORS & X-Frame-Options X-Frame-Options https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers ...
- web开发-CORS支持
一.简介 Web 开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS 等等 1.1.CORS与JSONP相比 1.JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求 ...
- springboot --> web 应用开发-CORS 支持
一.Web 开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS 等等 CORS 与 JSONP 相比 1. JSONP 只能实现 GET 请求,而 CORS 支持所有类型的 HTT ...
- Spring Boot Web应用开发 CORS 跨域请求支持
一.Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等 CORS与JSONP相比 1. JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求. 2. 使用C ...
- 跨域-jsonp、cors、iframe、document.domain、postMessage()
同源策略 概念:同源: 协议.域名.端口号 完全相同 同源策略是浏览器的一种安全策略:且浏览器不会将违反同源策略的响应信息返回 http://127.0.0.1:3000/index.html ...
- 跨域cors方法（jsonp，document.domain，document.name）及iframe性质
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- ASP.NET Core CORS 简单使用
CORS 全称"跨域资源共享"(Cross-origin resource sharing). 跨域就是不同域之间进行数据访问,比如 a.sample.com 访问 b.sampl ...
随机推荐
- loj558 「Antileaf's Round」我们的CPU遭到攻击
考完了可以发题解了. 做法是link-cut tree维护子树信息,并不需要维护黑树白树那些的. 下面是一条重链: 如果4是根的话,那么在splay上是这样的: 在splay中,子树的信息都已经计算完 ...
- vue复习(二)
一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点 每个组件模板只能拥有一个根标签 子组件的数据具有作用域,以达到组件的复用 二.局部组件 & ...
- JavaScript函数作用域与对象以及实用技巧
1. JS作用域 1.1 全局作用域和局部作用域 函数外面声明的就是 全局作用域 函数内是局部作用域 全局变量可以直接在函数内修改和使用 变量,使用var是声明,没有var是使用变量. 如果在函数内使 ...
- Linux入门基础(五):Linux管道,重定向,文本处理
多命令协作:管道及重定向 在Linux中,大多数命令都很简单,每个命令往往只实现一个或几个很简单功能. 我们可以通过将不同功能的命令组合起来一起使用,达到完成某个复杂功能的目的 CLI下几乎所有的命令 ...
- 记录Centos7搭建ftp服务器以及遇到的各种坑
前言 今天被经理要求搭建ftp服务器,然后就去网上搜索了一下教程.搭建成功后(遇到的坑不少)特此记录一下.因为是为了记录一下整个操作流程以防以后使用所以比较啰嗦. 目录 1.安装vsftpd 2.创建 ...
- C#四则运算器（多态方法实现）
在上一节C#课上,我们学习了用类的继承的方式来做一个四则运算器,然而老师的代码在课上演示的效果并不理想,而且没有使用多态的思想实现,今天我们就来用多态的方式实现四则运算器. 1. 题目及要求 2. A ...
- WebGL——osg框架学习四
这篇我们接着来看一下DrawEntityActor类,我们来看看这个继承DrawActor的类到底做了什么事.我们之前学习了Drawable对应的DrawActor,那么我们类比的来看Drawable ...
- X509证书申请以及PKCS#10 详解
一.证书颁发 1.单证书的签发 1) 用户填写信息注册(或者由RA的业务操作员注册用户). 2) 用户信息传递到RA. 3) RA审核通过. 4) 用户请求发证. 5) RA审核通过. 6) 用户签发 ...
- golang -- 字符串就地取反
字符串 定义 在golang中字符串是一种不可变的字节序列,它可以包含任意的数据,包括0值字节,但主要是人类可以阅读的文本.golang中默认字符串被解读为utf-8编码的Unicode码点(文字符号 ...
- 切换nPar或vPar的启动模式
在EFI Shell中执行vparconfig即可随意切换vpar和npar模式 该命令在\EFI\HPUX目录下 vparconfig 显示当前的模式 vparconfig reboo ...