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 ...
随机推荐
- Wannafly挑战赛18B 随机数
Wannafly挑战赛18B 随机数 设\(f_i\)表示生成\(i\)个数有奇数个1的概率. 那么显而易见的递推式:\(f_i=p(1-f_{i-1})+(1-p)f_{i-1}=(1-2p)f_{ ...
- Orz YYB!
就是右边OrzYYB按钮的实现. 从这位dalao的博客蒯(mogai)的js代码. <script> function orzyyb(){ document.getElementById ...
- Python之subprocess模块、sys模块
一.subprocess模块 # import os # os.system('tasklist') #类似cmd输入系统命令 ''' subprocess的目的就是启动一个新的进程并且与之通信. s ...
- Android studio Error occurred during initialization of VM 问题解决
最近开发导入其他Android项目遇见的问题,如下图: 解决办法: 将org.gradle.jvmargs=的值该为521(堆内存分配过高导致) 备忘,希望能帮助到大家
- Mysql行转列的简单应用
最近在复习过程中愈发觉得,有些东西久了不用,真的会忘~——~. 将上面的表格转换为下面的表格 我拼sql拼了好久还是没弄出来,还是偶然看到我以前的笔记,才想起有行转列这样的操作(太久没有写过复杂点的s ...
- [codeForce-1006C]-Three Parts of the Array (简单题)
You are given an array d1,d2,…,dnd1,d2,…,dn consisting of nn integer numbers. Your task is to split ...
- Java那些事－泛型通配符
Java的类型通配符,可以出现在类.方法上面.最常用的方式就是集合类,例如List,Set等类上面. 通配符类型 有泛型参数 List 有无类型标识 List< ? > 有通用的标识 Li ...
- Table 组件构建过程中遇到的问题与解决思路
在 GearCase 开源项目构建 Table 组件的过程中.遇到了各式各样的问题,最后尝试了各种方法去解决这些问题. 遇到的部分问题 checkbox 的全选和半选问题 table 组件的排序请求方 ...
- maven摘除jar包中配置文件
<plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-jar-p ...
- 2017秋软工 - 本周PSP
1. PSP 2. PSP饼状图 3. 进度条 4. 累计进度图