iframe demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left-bg {
width: 600px !important;
height: 720px !important;
background-image: url('https://img1.baidu.com/it/u=3951869245,4174446040&fm=26&fmt=auto&gp=0.jpg') !important;
background-size: 600px 700px !important;
background-repeat: no-repeat !important;
background-position: center center !important;
}
.logo {
width: 171px !important;
height: 24px !important;
background-image: url('https://cdn.studentbeans.com/v4/static/assets/production/student-beans-logo.8d806571..svg') !important;
background-size: 171px 24px !important;
background-repeat: no-repeat !important;
background-position: center center !important;
margin-top: 50px !important;
}
.content {
width: 80vw !important;
margin: 0 auto !important;
display: flex !important;
}
.doc{
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: space-between !important;
width: calc(80vw - 600px) !important;
height: 650px !important;
margin: calc(calc(720px - 650px) / 2) 150px !important;
}
.title{
font-size: 34px !important;
margin: 20px 0 !important;
}
.context{
font-size: 25px !important;
line-height: 35px !important;
}
button{
width: 200px !important;
padding: 8px 20px !important;
border-radius: 5px !important;
margin-top: 50px !important;
}
</style>
</head>
<body>
<div class="content">
<div class="left-bg">
</div>
<div class="doc">
<div class="title">
25% Student Discount at 111111111 Store
</div>
<div class="context">
Unlock 25% student discount at 111111111 Store with Student Beans.<br />
Use our 111111111 Store student discount code at the checkout to enjoy 25% off your order.<br />
For instant access to this discount simply register and verify your student status with Student Beans.
It's free!<br />
</div>
<button>
login
</button>
<a href="#">See Terms & Conditions</a>
<div class="logo"></div>
<a href="#">Support</a>
</div>
</div>
</body>
</html>
index
引用iframe
<iframe name="aa" src="./_iframe.html" width="100%" height="950px" scrolling="no" marginheight="0px" marginwidth="0px" frameborder="0"></iframe>
CSS尝试一：
.left-bg{
background-image: url('https://img2.baidu.com/it/u=1070003001,653753576&fm=26&fmt=auto&gp=0.jpg') !important;
}
/* 失败 */
CSS尝试二：
.content:before{
content: '';
width: 600px !important;
height: 720px !important;
background-image: url('https://img2.baidu.com/it/u=1070003001,653753576&fm=26&fmt=auto&gp=0.jpg') !important;
background-size: 600px 700px !important;
background-repeat: no-repeat !important;
background-position: center center !important;
}
.left-bg{
display: none;
}
/* 失败 */
CSS尝试三：
.content:before{
content: '';
width: 600px !important;
height: 720px !important;
background-image: url('https://img2.baidu.com/it/u=1070003001,653753576&fm=26&fmt=auto&gp=0.jpg') !important;
background-size: 600px 700px !important;
background-repeat: no-repeat !important;
background-position: center center !important;
}
.left-bg{
visibility: hidden;
position: absolute;
}
/* 失败 */
到目前为止，css附加都是失败的，header里面的样式有引入，但是实际效果又不出来，整体没有应用上去
index.css
.content:before{
content: '';
width: 600px !important;
height: 720px !important;
background-image: url('https://img2.baidu.com/it/u=1070003001,653753576&fm=26&fmt=auto&gp=0.jpg') !important;
background-size: 600px 700px !important;
background-repeat: no-repeat !important;
background-position: center center !important;
}
.left-bg{
display: none;
}
js尝试一：
既然css不可以，我就js来一下
document.write('<link id="iframe_css" href="./index.css" type="text/css" rel="stylesheet"/>');
/* 一样，加上去样式表应用不上去 */
然后我就想会不会是打开方式不对，于是
js尝试二：
window.onload = function () {
new_element = document.createElement('link');
new_element.setAttribute('rel', 'stylesheet');
new_element.setAttribute('href', './index.css');
document.body.appendChild(new_element);
}
/* 一样 */
没完我跟你讲
js尝试三：
window.onload = function () {
new_element = document.createElement('link');
new_element.rel = 'stylesheet';
new_element.href = './index.css';
document.body.appendChild(new_element);
}
/* 一样 */
这个时候我觉得事情没那么简单，于是换了个思路
js尝试四：
直接给iframe添加样式表，果然让我找到了博文（2011.01）
window.onload = function () {
//IE专用(通过frames索引定位)： document.frames[i].document.getElementById('元素的ID');
new_element = document.createElement('link');
new_element.setAttribute('rel', 'stylesheet');
new_element.setAttribute('href', './index.css');
document.frames[0].document.head.appendChild(new_element);
}
/* 一样 */
这里我用
console.log(document.frames)
/* 打印出来是 underfined */
js尝试五：
直接给iframe添加样式表，果然让我找到了博文（2011.01）
window.onload = function () {
// IE专用(通过IFRAME名称形象定位)： document.frames['iframe的name'].document.getElementById('元素的ID');
new_element = document.createElement('link');
new_element.setAttribute('rel', 'stylesheet');
new_element.setAttribute('href', './index.css');
document.frames['aa'].document.head.appendChild(new_element);
}
/* 一样 */
js尝试六：
直接给iframe添加样式表，果然让我找到了博文（2011.01）
window.onload = function () {
// IE专用(通过IFRAME名称形象定位)： document.frames['iframe的name'].document.getElementById('元素的ID');
let fr = document.querySelector('iframe');
console.log(fr);
fr.contentWindow.document.head.appendChild(new_element);
}
/* 一样 */
到此为止的所有尝试宣告失败
于是再次寻求度娘的帮助。。。看到头皮发麻
没有办法。。。寻求同事帮助
同事没有办法。。。我裂开