Question

更新：谢谢所有帮助过的人。我希望这里的无数解决方案可以作为任何面临类似困难的人的参考。

我正在使用PHP读取文本文件，我需要将字符串传递给JS进行操作。我尝试了将PHP放入我的外部JS文件的更直接的方法，但是这不起作用所以我正在使用一个空的div容器。但是，在JS中，我仍然得到一个未定义的值。该文件正确读入div值，它不会传递给我的外部javascript文件。

HTML：

<?php
    $world = file_get_contents('http://url.com/testworld.txt');
    //echo $world;
?>

<html>

    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="js/game.js"></script>
    </head>

    <body onload="init()">
        <canvas id="game" width="650" height="366" style="border: 2px solid black;"></canvas>
        <br />
        <h1> Currently in development.</h1>
        <br />
        <div id="world" value="<?php echo $world; ?>" />
    </body>

</html>

和JS：

var world = document.getElementById('world').value;

document.write(world);

如果有一种方法可以在外部javascript文件中从PHP中提取变量，我宁愿这样做。

Answer 1

value在DOM元素上有特殊含义（它指的是文本框的值等）。相反，您可以使用data-value等HTML5 Data Attribute，然后使用document.getElementById('world').getAttribute('data-value');进行检查。

但是，更好的方法是使用隐藏输入，例如

<input type="hidden" id="world" value="<?php echo $world; ?>" />

然后按原样保留脚本。

Answer 2

从PHP传递数据非常容易 - ＆gt; JS无需将其隐藏在DOM中。技巧是json_encode（）函数 - 它将php字符串，数组等转换为有效的javascript格式。请参阅下面的示例，修正：

<?php
    $world = file_get_contents('http://url.com/testworld.txt');
?>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/game.js"></script>
</head>
<body onload="init()">
    <script type="text/javascript">
        //World is defined here, and accessible to the javascript that runs on the page
        var world = <?=json_encode($world)?>;
    </script>
    <canvas id="game" width="650" height="366" style="border: 2px solid black;"></canvas>
    <br />
    <h1> Currently in development.</h1>
    <br />
</body>

我很确定你的麻烦正在发生，因为变量的范围在javascript中有效。这个简单的示例必须适合您：

<?php
    $foo = "\"Hello world!\"";
?>
<html>
<head>
</head>
<body>
    <script type="text/javascript">
        var foo = <?=json_encode($foo)?>;
        alert("The value of foo is: " + foo);
    </script>
</body>
</html>

因此，在内联脚本的上下文中，存在foo变量。也许如果您的代码看起来像：

<script type="text/javascript">
    //Load the game world, and pass to the javascript lib
    var world = <?=json_encode($world)?>;
    loadWorld(world);
</script>

那么你不必担心范围太大了吗？

Answer 3

另一种方式：在你的PHP

<div id="world" data-world="<?php echo $world; ?>" />

在你的JS中：

$('#world').attr('data-world');

此外，您可能希望确保$ world的值被正确转义以用作html属性

Answer 4

对div有一个value属性是没有意义的。而不是div使用隐藏的textarea元素并使用以下内容将文件内容放入其中：

<textarea id="fileContent" style="display:none"><?php echo $world; ?></textarea>

然后在JS：

document.getElementById('fileContent').value;

将返回文本区域内容

Answer 5

我不确定这一点，但可能是2 $world个变量位于不同的范围内。试试：

<html>

    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="js/game.js"></script>
    </head>

    <body onload="init()">
        <canvas id="game" width="650" height="366" style="border: 2px solid black;"></canvas>
        <br />
        <h1> Currently in development.</h1>
        <br />
        <div id="world" value="<?php echo file_get_contents('http://url.com/testworld.txt'); ?>" />
    </body>

</html>

看看它是否有效

Answer 6

尝试更改：

<div id="world" value="<?php echo $world; ?>" />

为：

<div id="world"><?php echo $world; ?></div>

并改变：

getElementById('world').value;

为：

getElementById('world').innerHTML;

如果需要，可以在div中添加display: none;样式以隐藏它。

Answer 7

您应该在隐藏输入字段中指定该值，而不是在div标记中指定值。这是一种更好的方法像这样

<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/game.js"></script>
</head>

<body onload="init()">
    <canvas id="game" width="650" height="366" style="border: 2px solid black;"></canvas>
    <br />
    <h1> Currently in development.</h1>
    <br />
    <input type="hidden" name="world" id="world" value="<?php echo $world;?>"/>         
</body>

</html>

你也应该指定表格标签。通过指定表单标记，您可以使用javascript访问元素的方法更多。

如果你想使用div那么它应该是这样的..

<div id="world"><?php echo $world;?></div>

在js中，您可以通过此代码访问$ world ..

var world = document.getElementById('world').innerHTML;

从PHP传递时，Javascript值未定义

7 个答案: