javascript - 基于父窗口更改 iframe 中的 css 属性

Question

我试图在网站上的两个不同页面上运行 iframe，但具有不同的 css 属性。由于我的 index.php 空间有限，我想将 iframe 中的文本限制在较小的宽度，而在另一个页面(samples/index.php)上，宽度没有限制，iframe 可以大。如果我在两个页面上使用相同的“大”宽度，并在 index.php 上使 iframe 变窄，则文本和将超出边缘并被遮挡(我不想使用滚动条)。

在 index.php 中，我有以下声明:

<iframe id="iframe_1" src="samples/data-iframe.html" width="850px" scrolling="no"></iframe>

在samples/index.php中，宽度比较窄

<iframe id="iframe_2" src="data-iframe.html" width="620px" scrolling="no"></iframe>

data-iframe.html 声明 css 如下:

<style type="text/css">

#gallery { position: relative; width:500px; height:340px; margin:0; padding:0; }
#gallery li { display: block; }

p.blocktext {
margin-left: auto;
margin-right: auto;
width: 800px;
font-size:11px;
color: black;
background-color: white;
}

#everything {
border-style:double;
border-width:3px;
margin-left: auto;
margin-right: auto;
width: 830px;
background-color: white;
}
#everything hr { width:600px; }

</style>

这包括宽度为 830 像素的 div 内的所有内容，由双线边框界定，并且内部文本限制在 800 像素的区域内。

iframe 显示的实际内容来自外部 javascript 文件 - 它紧接在 css 语句下方:

<script src="samples/test-iframe.js"></script>

在 test-iframe.js 中，例如:

document.write("<center>");
document.write("<div id=\"everything\">");
document.write("<ul id=\"gallery\">"); 
document.write("<li><img src=\"photo1.jpg\" alt=\"\" /></li>");
document.write("<li><img src=\"photo2.jpg\" alt=\"\" /></li>");
document.write("<li><img src=\"photo3.jpg\" alt=\"\" /></li>");
document.write("<li><img src=\"photo4.jpg\" alt=\"\" /></li>");
document.write("<li><img src=\"photo5.jpg\" alt=\"\" /></li>");
document.write("</ul>");
document.write("<p class=\"blocktext\">Dummy text.</p><hr><p class=\"blocktext\">More Dummy text (Note the hr to separate the two portions of text)</p></div>");
document.write("</center>");

所有图像的大小都已调整为位于 index.php 上的大 iframe 和 samples/index.php 上的较小 iframe 内可以想象，文本可能非常大 - 在它上面只是一个占位符，但它被限制在一个较小的区域。

我正在尝试使用以下代码找出父窗口是什么 - 如果它包含“示例”，则显示文本的完整宽度等。如果不包含 - 使用限制宽度。

var str = parent.location.href;
var nt = str.indexOf("samples");

var a = document.getElementById("blocktext");
var b = document.getElementById("everything");

if (nt>0) // samples found  
{
a.style.width = "800px";
b.style.width = "830px";
b.style.hr = "600px";
}
else // samples not found - narrower confines
{
a.style.width = "500px";  
b.style.width = "600px";  
b.style.hr = "400px"; 
}

出于某种原因，这不起作用； CSS 没有更新。我在 if block 中放置了一些测试代码，发现该代码正确地确定了父窗口，但它没有改变宽度或 hr 属性。谁能看出我做错了什么？

Answer 1

您可以使用 css @media 查询而不是 javascript 来确保您的内容适合:

p.blocktext {
margin-left: auto;
margin-right: auto;
width: 800px;
font-size:11px;
color: black;
background-color: white;
}

#everything {
border-style:double;
border-width:3px;
margin-left: auto;
margin-right: auto;
width: 830px;
background-color: white;
}
#everything hr { width:600px; }

@media all and (max-width: 829px) {
    p.blocktext {
        width: 500px;
    }
    #everything {
        width: 600px;
    }
    #everything hr {
       width: 400px;
    }
}

但最好使用动态尺寸进行设计。