xgqfrms
commented
6 years ago https://cn.bing.com/?intlF=&ensearch=1
如果服务器没配置，好像默认是禁用的（可以正常嵌入）。但是 页面的 js 执行不了.
Open xgqfrms opened 6 years ago
xgqfrms
commented
6 years ago https://cn.bing.com/?intlF=&ensearch=1
如果服务器没配置，好像默认是禁用的（可以正常嵌入）。但是 页面的 js 执行不了.
xgqfrms
commented
6 years ago 
Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
sandbox
xgqfrms
commented
6 years ago https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
const showDOM = (url = ``) => {
let iframeBox = $qs(`[data-img-box="empty-iframe-page-box"]`);
let no_data = `
<p data-no-data="p">
<span data-no-data="span">暂无数据</span>
</p>
`;
try {
if (url) {
let iframe = document.createElement(`iframe`);
iframe.src = url;
// sandbox
// srcdoc
iframe.style.height = `100%`;
iframe.style.width = `100%`;
iframe.style.minHeight = `300px`;
iframe.style.minWidth = `500px`;
iframe.setAttribute(`sandbox`, `allow-scripts`);
iframe.setAttribute(`sandbox`, `allow-scripts`);
iframe.setAttribute(`data-iframe`, `empty-iframe-page`);
iframe.setAttribute(`name`, `页面空模块`);
if (iframeBox) {
iframeBox.innerHTML = "";
iframeBox.insertAdjacentElement(`beforeend`, iframe);
}
}
} catch (err) {
// no data
iframeBox.innerHTML = "";
iframeBox.insertAdjacentHTML(`beforeend`, no_data);
throw new Error(`fetch image error`, err);
}
};
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options#Syntax
X-Frame-Options: deny
X-Frame-Options: sameorigin
X-Frame-Options: allow-from https://example.com/
calc()https://developer.mozilla.org/en-US/docs/Web/CSS/calc
.editorconfig
# .editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use
https://css-tricks.com/snippets/css/clear-fix/
.clear-fixed::after {
/* box-sizing: border-box; */
content: "";
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
/* shit IE */
zoom: 1;
height: 0;
font-size: 0;
}
https://snook.ca/archives/html_and_css/vm-vh-units
CSS Units
https://caniuse.com/#search=Units https://www.w3schools.com/CSSref/css_units.asp https://css-tricks.com/viewport-sized-typography/ https://css-tricks.com/fun-viewport-units/
xgqfrms
commented
6 years ago
{
"JavaScript ES6 React Template": {
"prefix": "js6r",
"body": [
"\"use strict\";",
"",
"/**",
" * ",
" * @author xgqfrms",
" * @license MIT",
" * @copyright xgqfrms",
" * ",
" * @description $2",
" * @augments $3",
" * @example $4",
" * ",
" */",
"",
"const $2Generator = ($5datas = [], debug = false) => {",
" let result = ``;",
" // do something...",
" return $7result;",
"};",
"",
"",
"",
"export default $2;",
"",
"export {",
" $2,",
"};",
"",
],
"description": "JavaScript ES6 React Template & code snippets!"
}
}
{
"CSS3 Template": {
"prefix": "c3t",
"body": [
"@charset \"UTf-8\";",
"",
"/**",
" * ",
" * @author xgqfrms",
" * @license MIT",
" * @copyright xgqfrms",
" * ",
" * @description $1.css",
" * ",
" */",
"",
":root {",
" --cololr: #000;",
" --default-cololr: #fff;",
" --new-cololr: #0f0;",
"}",
],
"description": "CSS3 Template & code snippets!"
}
}<!DOCTYPE html>
<html>
<head>
<style>
p{
position: relative;
text-indent: 36px;
}
span{
position: absolute;
display: inline-block;
width: 16px;
height: 16px;
background: url("paper.gif") no-repeat;
color: #0f0;
background-color: #000;
top: 50%;
transform: translateY(-50%);
left: 20px
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p> <span>X</span>This page has an image as the background!</p>
</body>
</html>
text-indent: 0px; & overflow: hidden;https://www.w3schools.com/css/tryit.asp?filename=trycss_background-image
p{
position: relative;
text-indent: 36px;
}
span{
position: absolute;
display: inline-block;
width: 16px;
height: 16px;
background: url("paper.gif") no-repeat;
color: #0f0;
background-color: #000;
top: 50%;
transform: translateY(-50%);
left: 20px;
text-indent: 0px;
overflow: hidden;
}
@charset "UTf-8";
/* index.css */
@import url("./commons/reset.css");
@import url("./layout/aside.css");
@import url("./utils/accordion.css");
.accordion-item-title-icon {
position: absolute;
display: inline-block;
width: 16px;
height: 16px;
color: #fff;
background-color: #333333;
/* @import & img path bug */
background: url("../imgs/menus.png") no-repeat;
background-position: 0 0;
overflow: hidden;
top: 50%;
transform: translateY(-50%);
left: 20px;
text-indent: 0;
}
OK
new HtmlWebpackPlugin({
template: "./src/html/index.html",
filename: "./index.html",
chunks: ["index"],
// chunks: ["app", "main"],// load modules order ??? fifo
hash: true,
// minify: true,
minify: {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
},
}),
webpack minify html template bug code demo ?
https://stackoverflow.com/questions/36031931/how-to-minify-html-templates-using-angular2-and-webpack
xgqfrms
commented
6 years ago // minify html
new HtmlWebpackPlugin({
template: "src/index.html",
chunksSortMode: "none",
minify: {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
removeTagWhitespace: true,
removeRedundantAttributes: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
}
}),jsut remove inject: false,
manaully setting multi pages
new HtmlWebpackPlugin({
// inject: false,
hash: true,
chunks: ["app"],
template: "./src/html/app.html",
filename: "./pages/app.html"
// filename: "./pages/[name].html"
}),
new HtmlWebpackPlugin({
// inject: false,
hash: true,
chunks: ["main"],
template: "./src/html/main.html",
filename: "./pages/main.html"
}),
new HtmlWebpackPlugin({
template: "./src/html/index.html",
filename: "./index.html",
chunks: ["index"],
// chunks: ["app", "main"],// load modules order ??? fifo
hash: true,
// minify: true,
minify: {
collapseWhitespace: true,
collapseInlineTagWhitespace: true,
},
}),
xgqfrms
commented
5 years ago
X-Frame-Options
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
bug