Question

我试图在网站上的两个不同页面上运行iframe但具有不同的css属性。由于我的index.php空间有限，我希望将iframe中的文本限制为较小的宽度，而在另一个页面（samples / index.php）上，对宽度和iframe没有限制可以更大。如果我使用相同的＆＃34;大＆＃34;两个页面上的宽度并使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中的所有内容，由双线边框限定，内部文本限制在800px的区域内。

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内，而样本/ index.php上的较小的iframe 可以想象，文本可能非常大 - 仅仅是一个占位符，但它被限制在一个较小的区域。

我尝试使用以下代码来查找父窗口是什么 - 如果它包含＆＃34; samples＆＃34;，则显示文本的完整宽度等。如果不是 - 请使用限制宽度。

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块中放了一些测试代码，发现代码正确地确定了父窗口，但它没有改变宽度或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;
    }
}

但是，使用动态尺寸进行设计会更好。

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

1 个答案: