标签：iframe 样式 element important background new document 添加 center
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);
}
/* 一样 */
到此为止的所有尝试宣告失败
于是再次寻求度娘的帮助。。。看到头皮发麻
没有办法。。。寻求同事帮助
同事没有办法。。。我裂开
标签：iframe,样式,element,important,background,new,document,添加,center 来源： https://www.cnblogs.com/y-y77/p/15186292.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。