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 ...
随机推荐
- win8.1下右下角出现大小写切换状态显示框解决方案
HKEY_LOCAL_MACHINE\SOFTWARE\Cambridge Silicon Radio\Harmony\Default双击右侧 OSD 将键值改成0 重启机器 成功关闭显示
- Altium 中PCB的Gerber生产资料的输出详细步骤
生产文件的输出,俗称Gerber out,Gerber文件是所有电路设计软件都可以产生的文件,在电子组装行业又称为模版文件(Stencil Data),在PCB制造业又称为光绘文件.可以说Gerber ...
- Jenkins自动化测试
Jenkins自动化测试 一个持续集成的基本原则是构建应该是可验证的.你必须能够客观地确定一个特定的构建是否准备就绪构建过程的下一个阶段,最便捷的方式做到这一点是使用自动化测试.如果没有适当的自动化测 ...
- Mysql行转列的简单应用
最近在复习过程中愈发觉得,有些东西久了不用,真的会忘~——~. 将上面的表格转换为下面的表格 我拼sql拼了好久还是没弄出来,还是偶然看到我以前的笔记,才想起有行转列这样的操作(太久没有写过复杂点的s ...
- ceilometer 源码分析（polling）（O版）
一.简单介绍ceilometer 这里长话短说, ceilometer是用来采集openstack下面各种资源的在某一时刻的资源值,比如云硬盘的大小等.下面是官网现在的架构图 这里除了ceilomet ...
- 从零开始的Python学习Episode 18——面向对象（1）
类与对象 类即类别.种类,是面向对象设计最重要的概念,对象是特征与技能的结合体,而类则是一系列对象相似的特征与技能的结合体. 类的定义 class 类名: 属性1 属性2 def 方法(self,ar ...
- PHP 伪协议
1.file:// file://用于访问本地文件系统,不受allow_url_fopen影响 <?php include($_GET['file']); ?> 2.http:// GET ...
- 互评Beta版本 - Hello World团队项目空天猎
由于改组项目未提供可以直接进行安装运行的安装包或可执行文件,所以我找到了该组组长陈同学,由他根据其小组项目的功能说明书进行演示. 基于NABCD评论作品,及改进建议 每个小组评论其他小组beta发布的 ...
- Daily Scrum (2015/11/8)
由于编译大作业临近deadline以及各项选修课即将结课,虽然PM强调软工任务也很紧迫,但是大多数成员表示今天想请假一天.符美潇今天把自己所负责的数据库编码部分和谢金洛的UI进行了对接.在测试过程中发 ...
- Task 3 求最大数组和
题目:返回一个整数数组中最大子数组的和. (要求:输入一个整形数组,数组里有正数也有负数. 数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和. 求所有子数组的和的最大值.要求时间复杂度为 ...