[英]getting screen width into javascript variable and sending it through ajax to a php page to avoid page load
这是用于在我的页面命名index.html
上检测屏幕分辨率并将其发送到 php 的JS
,以便可以使用$_GET
检索值:-
<script type="text/javascript">
width = screen.availwidth;
height = screen.availheight;
if (width > 0 && height >0) {
window.location.href = "http://localhost/main.php?width=" + width + "&height=" + height;
} else
exit();
</script>
这是我的 PHP 文件命名process.php
的内容。php :-
<?php
$screen_width = $_GET['width'];
$screen_height = $_GET['height'];
//EDITED PORTION
echo '<style>#Wrapper {width:'.$screen_width.';}</style>';
?>
现在在获得屏幕尺寸后我想显示index.php
。
请注意这些步骤,以了解我想要的工作方式:-
在整个过程中, index.php
不应被重新加载。 那么,如何做到呢?
编辑:
当JS
将值传递给它加载的 php 文件时,我想要的是获取屏幕分辨率并相应地设置网站页面宽度。 但是,如果JS
将数据发送到 php 文件并且如果我们通过 ajax 获取它,则可能会发生我的网站完全加载并且样式无法实现的情况,因为它已经在 ajax 工作之前加载了所有内容。
有没有足够有效的方法,或者我们可以以一种变得有效的方式来做到这一点。
这是我的编辑:2
更清楚地说,我将使用下图解释我想要实现的目标:-
现在如果我得到屏幕分辨率说800px
那么我知道我想从它的左侧扣除200px
,所以它将变成600px
并且因为我的divs
是250px
我将只能添加两个。 因此,为了避免在右侧显示100px
,我会将我的网站页面宽度调整为700px
。
我可以在 php 中做的事情,但是如何在同一页面上同时完成所有事情?
您可以将整个区域称为#Wrapper
Right One 作为#SideBar
Left Area 作为#LeftContent
希望我已经解释清楚了。 所以如果有人可以帮助我做必要的事情,请:)
我不确定我是否理解你的问题,但这就是我所知道的:如果你只想获得屏幕宽度然后设置 class 我不鼓励你那样做。 这不是很好,将来如果你需要改变你的页面布局,你将注定要在 php 中回显所有这些,你将避免很多重定向(index.html -> process.php -> index.php ).
通过您的示例,您可以在 Javascript 中完成所有操作。
这是 JQuery 的例子
var width = $(window).width(); //get the width of the screen
$('#Wrapper').css("width",width); //set the width to the class
如果想法适用于截然不同的屏幕分辨率(从 PC 到智能手机),您应该考虑改变您的方法。
祝你好运:)
试试这个:(我相信这就是你想要的)
你可以只用 JS 和 CSS 来做到这一点。这是一个例子:
为您的主体边距和测试 div 设置样式:
<style type="text/css">
body {
margin: 0px 0px 0px 200px;
}
.divForTesting {
width: 250px;
border: 1px solid green;
height: 100px;
float: left;
}
</style>
然后添加这个脚本:
<script>
// get the screen width
var width = $(window).width();
// get the number of pixels left in the screen (which is the width
// minus the margin you want, rest by 250px which is the "inner boxes" width)
var size = (width - 200) % 250;
// then re-set the margin (the "-10" is because you'll need extra space
// for borders and so on)
$('body').css("margin-left",200+(size-10));
</script>
并用这个 html 测试它:
<!-- I've aligned the outter div to the right -->
<div style="border: 1px solid red; float:right;" id="test">
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
<div class="divForTesting">test</div>
</div>
它适用于不同的分辨率。
试试看:)
我终于得到了我自己问题的解决方案:)
<script type="text/javascript">
var width = screen.availWidth;
var fwidth = (width - 270);
var i, k = 0;
var j =2;
for (i=1; i<=j; i++)
{
fwidth = fwidth - 220;
if (fwidth < 220)
{
j = j -1;
}
else {
k = k + 1;
j = j + 1;
}
}
var containerwidth = (width - (fwidth + 10));
var contentwidth = containerwidth - 250;
document.write('<style type="text/css"> .container {width:' + containerwidth + 'px; } .mainContent { width:' + contentwidth + 'px; } </style>');
</script>
根据我提出的问题, contentwidth
是灰色内容, containerwidth
是#Wrapper
...
您可以使用 javascript 库,例如 jQuery。而不是:
window.location.href = "http://localhost/main.php?width=" + width + "&height=" + height;
您可以致电:
$.get("http://localhost/main.php?width=" + width + "&height=" + height, function(data, textStatus, jqXHR) {
// replace the html body with the output of main.php
$('body').html(data); // you might want to customize that
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.