将屏幕宽度放入 javascript 变量并通过 ajax 将其发送到 php 页面以避免页面加载

getting screen width into javascript variable and sending it through ajax to a php page to avoid page load

提问by Django Anonymous

This is the JSto detect the screen resolution on my page naming index.htmland sending it to php, so that the values can be retrived using $_GET:-

这是JS在我的页面命名中检测屏幕分辨率index.html并将其发送到 php，以便可以使用$_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>

This is the content of my PHP file naming process.php:-

这是我的 PHP 文件命名的内容process.php：-

<?php
$screen_width = $_GET['width'];
$screen_height = $_GET['height'];

//EDITED PORTION
echo '<style>#Wrapper {width:'.$screen_width.';}</style>';
?>

Now after getting the screen size i want to display the index.php.

现在在获得屏幕尺寸后，我想显示index.php.

NOTE THESE STEPS, AS TO UNDERSTAND THE WAY I WANT THINGS TO WORK:-

请注意这些步骤，以了解我希望事情的工作方式：-

1. Page Load Started
2. Javascript detected available screen width.
3. It passes it to php file and the PHP variable got the screen available screen width.
4. Then page get displayed using that php variable (Means the page width is being set using that php variable)

1. 页面加载开始
2. Javascript 检测到可用的屏幕宽度。
3. 它将它传递给 php 文件，PHP 变量获得了屏幕可用的屏幕宽度。
4. 然后使用该 php 变量显示页面（意味着使用该 php 变量设置页面宽度）

In the whole process the index.phpshould not be reloaded. So, How it can be done?

在整个过程中index.php不应重新加载。那么，如何做到呢？

EDIT:

编辑：

As the JSpasses the value to the php file it gets loaded, what i want is to get the screen resolution and accordingly set the website page width. But if JSsend the data to php file and if at all we get it through ajax, it may can happen that my website get fully loaded and the style would not be implemented because it has already been loaded all the stuffs before the ajax work.

当JS将值传递给它加载的 php 文件时，我想要的是获取屏幕分辨率并相应地设置网站页面宽度。但是，如果JS将数据发送到 php 文件并且我们通过 ajax 获取它，则可能会发生我的网站完全加载并且样式无法实现的情况，因为它在 ajax 工作之前已经加载了所有内容。

Is there any method which is efficient enough or we can do this one in a way that it become efficient.

有没有足够有效的方法，或者我们可以以一种变得有效的方式来做这个。

This is my EDIT:2

这是我的编辑：2

To be more clear i'll actually explain what i want to achieve using the following image:-

为了更清楚，我将使用下图实际解释我想要实现的目标：-

Now if ill get the screen resolution say 800pxthen i know that i want to deduct 200pxof left side from it, so it will become 600pxand as my divsare 250pxi'll be able to add only two. Therefore, to avoid showing that 100pxin right i'll adjust my website page width to 700px.

现在，如果生病让屏幕分辨率说800px的话，我知道我要扣除200px左侧从它的，所以它会变得600px和我divs有250px我就可以只有两个补充。因此，为了避免100px在右侧显示，我会将我的网站页面宽度调整为700px.

Things i can do in php, but how to get all things get done at same time on same page?

我可以在 php 中做的事情，但是如何在同一页面上同时完成所有事情？

The whole area you can call as#WrapperRight One as#SideBarLeft Area as#LeftContent

您可以将整个区域称为#Wrapper右侧#SideBar区域作为左侧区域#LeftContent

Hope i have explained things well. So please if someone can help me doing the needful :)

希望我已经解释清楚了。所以请如果有人可以帮助我做必要的事情:)

回答by Henrique Gon?alves

I'm not sure if I understood your problem but this is what I've got: if you only intend to get the screen width and then set the class I disencourage you to do it that way. It's not nice and in the future if you need to change your page layout you'll be doomed by having all those echo in php and you'll avoid a lot of redirects (index.html -> process.php -> index.php).

我不确定我是否理解您的问题，但这就是我所得到的：如果您只想获取屏幕宽度然后设置类，我不鼓励您这样做。这不好，将来如果您需要更改页面布局，您将注定要在 php 中包含所有这些回显，并且您将避免大量重定向（index.html -> process.php -> index.php ）。

By your example you can do it all in Javascript.

通过您的示例，您可以在 Javascript 中完成所有操作。

This is example is with JQuery

这是使用 JQuery 的示例

var width = $(window).width(); //get the width of the screen
$('#Wrapper').css("width",width); //set the width to the class

If the idea is for very different screen resolutions (from PCs to SmartPhones), you should consider changing your approach.

如果想法是针对非常不同的屏幕分辨率（从 PC 到智能手机），您应该考虑改变您的方法。

Good luck :)

祝你好运 ：）

---

---

TRY THIS:(I believe is what you want)

试试这个：（我相信这就是你想要的）

You can do this with just JS and CSS. Here is an example:

你可以只用 JS 和 CSS 来做到这一点。下面是一个例子：

set the style for your body margin and your test div:

为您的身体边距和您的测试 div 设置样式：

<style type="text/css">
    body {
        margin: 0px 0px 0px 200px;
}
    .divForTesting {
        width: 250px;
        border: 1px solid green;
        height: 100px;
        float: left;
}
</style>

then add this script:

然后添加这个脚本：

<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>

and test it with this html:

并用这个 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>

It works in different resolutions.

它适用于不同的分辨率。

Give it a try :)

试一试 ：）

回答by Django Anonymous

I finally get the solution for my own question :)

我终于得到了我自己问题的解决方案:)

<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>

Where contentwidthis the grey content and containerwidthis the #Wrapperas per question asked by me...

哪里contentwidth是灰色的内容和containerwidth是#Wrapper为每个问题问的我...

回答by jpic

You can use a javascript lib like jQuery. Instead of:

您可以使用 jQuery 之类的 javascript 库。代替：

window.location.href = "http://localhost/main.php?width=" + width + "&height=" + height;

You can call:

您可以致电：

$.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
});

Documentation of $.get() jQuery function.

$.get() jQuery 函数的文档。