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 ...
随机推荐
- 记录Centos7搭建ftp服务器以及遇到的各种坑
前言 今天被经理要求搭建ftp服务器,然后就去网上搜索了一下教程.搭建成功后(遇到的坑不少)特此记录一下.因为是为了记录一下整个操作流程以防以后使用所以比较啰嗦. 目录 1.安装vsftpd 2.创建 ...
- 《Python 网络爬虫权威指南》 分享 pdf下载
链接:https://pan.baidu.com/s/1ZYEinjOwM_5dBIVftN42tg 提取码:1om6
- 维诺图（Voronoi Diagram）分析与实现（转）
一.问题描述1.Voronoi图的定义又叫泰森多边形或Dirichlet图,它是由一组由连接两邻点直线的垂直平分线组成的连续多边形组成. 2.Voronoi图的特点(1)每个V多边形内有一个生成元: ...
- 解决Ubuntu“下载额外数据文件失败 ttf-mscorefonts-installer”的问题 （转载）
解决Ubuntu“下载额外数据文件失败 ttf-mscorefonts-installer”的问题 发表于 2017-09-15 | 更新于 2018-04-29 | 分类于 Linux | 评论数: ...
- 国密算法--Openssl 实现国密算法(基础介绍和产生秘钥对)
国密非对称加密算法 又称sm2,它是采取了ECC(曲线加密算法)中的一条固定的曲线,实际上就是ECC算法. 因为openssl里面不包含sm2算法,所以就要重新进行封装-. - 对于ECC算法我就不介 ...
- Linux加密到K8S中
文件名字 test.conf 加密: base64 --wrap=0 aaa.conf 把得到的密钥填入配置文件当中即可
- Linux虚拟机安装教程
必备组件: vmware(程序主题) 链接:https://pan.baidu.com/s/14OplOGOQTVAnf0iDqgDhDQ 提取码:jape centos(Linux系统) 链接:ht ...
- ORM PHP 学习记录
ORM:object relation mapping,即对象关系映射,简单的说就是对象模型和关系模型的一种映射.为什么要有这么一个映射?很简单,因为现在的开发语言基本都是oop的,但是传统的数据库却 ...
- 奔跑吧DKY——团队Scrum冲刺阶段-Day 5
今日完成任务 谭鑫:继续解决背景音乐的问题,修改游戏中的bug. 黄宇塘:背景图片需重做,开始制作人物图片和背景图. 赵晓海:制作人物图及背景图. 方艺雯:制作人物图,编写博客. 王禹涵:继续解决背景 ...
- 20162319 实验二 Java面对对象程序设计 实验报告
实验二 Java面向对象程序设计 实验内容 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4.熟悉S.O.L.I.D原则 5.了解设计模式 实验 ...