Question

这似乎是一个奇怪的问题。也许这也是错误的做法。但我必须这样做：

页面上有一些菜单项
每个页面的内容存储在一些.phtml个文件
页面加载时显示默认内容（使用require）
所有其他内容也应加载，并应存储在JavaScript-array
当用户点击链接时，内容将被交换

问题是：

不应使用AJAX
所有内容都不能在开头附加，为好旧的SEO

除了以下内容外，所有部分都很简单：如何将内容导入JavaScript数组。像content.push('<?php print require 'page.phtml'; ?>');这样的东西当然不会起作用，因为它会返回一个多行字符串，这不适用于JavaScript。欢迎所有想法。也许我忽略了一些非常简单的事情。

Answer 1

<script>
<?php

ob_start();
require 'page.phtml';
$contents = ob_get_clean();

echo "var content = ".json_encode($contents);
?>
</script>

如果您的page.phtml文件中没有php代码，则可以使其更加轻松

<script>
<?php
echo "var content = ".json_encode(file_get_contents('page.phtml'));
?>
</script>

显然你也可以这样使用它：

echo "content.push(".json_encode($contents).");";

为什么不运作

<?php
function json_require($filepath) {
  ob_start();
  require($filepath);
  return json_encode(ob_get_clean());
}
?>
...
content.push(<?=json_require('page_1.phtml');?>);
content.push(<?=json_require('page_2.phtml');?>);
content.push(<?=json_require('page_3.phtml');?>);
content.push(<?=json_require('page_4.phtml');?>);

Answer 2

你可以使用隐藏的div而不是使用js数组，在页面的末尾，所以它们不会影响seo。然后使用这些divs id来交换你的内容。

我希望你使用jQuery，如果不是这样，即使使用简单的js也可以。

让我详细说明

<script>
function shouldBeCalledAtSomeEvent(page_id)
{
   var html = $('#'+page_id+').html();
   $('#idOfYourTargetElem').html(html)
}
</script>

<!-- end of your main file -->
<div style="display:none" id="page_1">
include('page_1.phtml');
</div>

<div style="display:none" id="page_2">
include('page_2.phtml');
</div>

<div style="display:none" id="page_3">
include('page_3.phtml');
</div>

Answer 3

如果你不能使用ajax并且你担心seo，我建议你使用@rupesh的修改版本答案：将html存储在脚本标签中，这样它们就可以被js访问而不被抓取器读取：

<script type="text/hidden-menu" class="hidden_menu" >
    include('page_1.phtml');
</script>
<script type="text/hidden-menu" class="hidden_menu" >
    include('page_2.phtml');
</script>
<script type="text/hidden-menu" class="hidden_menu" >
    include('page_3.phtml');
</script>

然后你可以在js中轻松构建数组：

var content = [],
    contentNodes = document.getElementsByClassName('hidden_menu'),
    i=0;
for(;i<contentNodes.length;i++)
   content.push(contentNodes[i].innerHTML);

瞧，你的内容数组中包含了从php发送的html而不使用ajax而且不影响seo。

我可以将所需文件的全部内容存储在JavaScript变量中吗？

3 个答案: