简体   繁体   English

尝试从PHP脚本中访问外部JavaScript函数

[英]Trying to access an external JavaScript function from within a PHP script

Rewording the previous PHP/JavaScript question regarding access to an external JavaScript function from within a PHP script. 重述以前的PHP / JavaScript问题,有关从PHP脚本中访问外部JavaScript函数的问题。

I am trying to access a JavaScript function MyJsFnct which is a part of MyJs.js JavaScript file from MyPhp.php PHP script. 我正在尝试访问JavaScript函数MyJsFnct ,它是MyPhp.php PHP脚本中MyJs.js JavaScript文件的一部分。

I am using Windows7, Internet Explorer 11.0.9600, and XAMPP-V3.2.1 with PHP-5.5.9. 我正在将Windows7,Internet Explorer 11.0.9600和XAMPP-V3.2.1与PHP-5.5.9一起使用。

My Web root directory is C:\\Apache-Php-MySql\\htdocs . 我的Web根目录是C:\\Apache-Php-MySql\\htdocs

MyPhp.php and MyJs.js are in C:\\Apache-Php-MySql\\htdocs\\My-Php-Scripts . MyPhp.phpMyJs.js位于C:\\Apache-Php-MySql\\htdocs\\My-Php-Scripts

Here is a skeleton of MyPhp.php , and MyJs.js which contains the JavaScript function MyJsFnct . 这是MyPhp.phpMyJs.js的框架,其中包含JavaScript函数MyJsFnct

Note , MyPhp.php and MyJs.js are parts of a very large PHP/JavaScript project which contains several hundreds lines of code. 注意MyPhp.phpMyJs.js是一个非常大的PHP / JavaScript项目的一部分,该项目包含数百行代码。 I narrowed the problem down to just the code that does not work. 我将问题缩小为无法正常工作的代码。 Since the skeleton code is a part of a much larger project, I can't just replace the PHP code with HTML code, or replace the link with a button. 由于骨架代码是更大项目的一部分,因此我不能只用HTML代码替换PHP代码,也不用按钮替换链接。 I need to find out why the PHP code can't access the JavaScript function. 我需要找出为什么PHP代码无法访问JavaScript函数的原因。

The actual project is taken from PHP and MySQL for Dynamic Web Sites, 4th edition, by Larry Ullman, chapter 11, "PHP and JavaScript" . 实际项目取材于Larry Ullman的第4版动态网站的PHP和MySQL,第11章“ PHP和JavaScript”

MyPhp.php MyPhp.php

<!DOCTYPE html> 
<html lang ="en">
<head> 
<title>Page-Php-Js</title>
<meta http   equiv="content-type"   content ="text/html;   charset=UTF-8" /> 
<script type="text/javascript"  charset="utf-8"   src="MyJs.js"> </script>
</head>
<body> 
<?php 
print  "<a href=\"javascript:MyJsFnct()\">Click</a> to call JS function (MyJsFnct)";
?> 
</body>
</html>

MyJs.js MyJs.js

function MyJsFnct() { 
    /* some code that lets me know that
       the JavaScript function has been called */
}

Related question, is there a way to determine which JavaScript function has been called? 相关问题,有没有一种方法可以确定调用了哪个JavaScript函数?

When using the debugger (F12 Developer Tools), the PHP page looks OK with 0 errors, warnings, or messages, but when I click on the JavaScript link I get the following error: 'MyJsFnct' is undefined . 使用调试器(F12开发人员工具)时,PHP页面看起来正常,错误,警告或消息为0 ,但是当我单击JavaScript链接时,出现以下错误: 'MyJsFnct' is undefined

This isn't the answer you were hoping for, but: you're doing things really wrong, and this will hopefully help you get things at least closer to right. 这不是您希望得到的答案,但是:您所做的事情确实是错误的,这有望帮助您至少使事情更接近正确。

Step one is to know where PHP runs, where JavaScript runs, and what HTML should look like. 第一步是了解PHP在哪里运行,JavaScript在哪里运行以及HTML应该是什么样。

Based on what you've shown, you're not using actual PHP code, so we don't need any kind of <?php ... ?> tags and then string escaping. 根据显示的内容,您没有使用实际的PHP代码,因此我们不需要任何<?php ... ?>标记,然后再进行字符串转义。 Anywhere. 任何地方。

what you really should have is a plain index.php file that is for all intents and purposes, just html: 您真正应该拥有的是一个纯index.php文件,该文件出于所有意图和目的,仅包含html:

<!doctype html> 
<html lang ="en">
  <head> 
    <title>Page-Php-Js</title>
    <meta charset="utf-8">
    <script src="MyJs.js"></script>
  </head>
  <body> 
    <button onclick="MyJsFnct()">Click</button>
  </body>
</html>

There is no PHP code in here, because you're not using anything PHP. 这里没有PHP代码,因为您没有使用任何PHP。 Requesting index.php will simply straight up pass this through. 请求index.php只会直接通过它。 Also note that this is proper HTML5, unlike your source: <meta> has a charset attribute, the format you used is HTML 4.01. 另请注意,这是正确的HTML5,与您的来源不同: <meta>具有charset属性,您使用的格式为HTML 4.01。 That would be fine if you said you were using HTML 4.01, but the <!doctype html> instruction explicitly tells browsers "this is HTML5!". 如果您说使用的是HTML 4.01,那会很好,但是<!doctype html>指令明确告诉浏览器“这是HTML5!”。 Further, meta is not /> closed. 此外, meta不是/>封闭。 <script> elements don't need a type for javascript (neither do <style> elements for css). <script>元素不需要javascript type (css的<style>元素也不需要)。

You also used an <a> as if it's a button - there is a <button> element so use that instead. 您还使用了<a>好像它是一个按钮一样-有一个<button>元素,请改用它。 Only use an <a> if you actually link out to another resource (either URL or a #FragmentIdentifier). 仅当您实际链接到另一个资源(URL或#FragmentIdentifier)时,才使用<a> If you don't want it to look like a button, that's irrelevant: it's about the semantic role. 如果您不希望它看起来像一个按钮,那就没关系了:它与语义角色有关。 If you can click it, to cause JS to do something, it's a <button> and then you use some CSS to make it look however you need (including just plain text. Button styling is just some creative background/foreground/border coloring by browsers and fully overridable). 如果单击它,以使JS做某事,它是一个<button> ,然后使用一些CSS使其具有所需的外观(仅包括纯文本。按钮样式只是一些创造性的背景/前景/边框着色,浏览器和完全可替代)。

Now, PHP is going to do nothing here. 现在,PHP在这里什么也不做。 It runs on the server, and generates your content on request by someone's browser. 它运行在服务器上,并根据某人的浏览器的请求生成您的内容。 It gets transfered - PHP now dies. 它被转移了-PHP现在死了。 Literally, its process is killed and the server now waits for more new request. 从字面上看,它的进程被终止,服务器现在等待更多新请求。 If those are for PHP files, it will start PHP up again, which will again die once it's generated the data request. 如果这些用于PHP文件,它将再次启动PHP,一旦生成数据请求,该PHP将再次死亡。

So the page it sent is no longer under PHP control: it now lives in a browser, "client-side", on the computer of whoever asked for the URL. 因此,它发送的页面不再受PHP控制:现在,无论谁要求输入URL,它都位于浏览器的“客户端”上。 That can be you, on the same computer that's running PHP, but in terms of "what controls the data" that doesn't matter: PHP died, your browser go the data. 可能是您,在同一台运行PHP的计算机上,但是就“什么控制数据”而言,这无关紧要:PHP死了,您的浏览器访问了数据。 Now we're in HTML+JavaScript-only territory. 现在我们处于仅HTML + JavaScript的领域。

So, fixing your JavaScript: do not use document.write . 因此,修复您的JavaScript: 不要使用document.write It's an ancient, obsolete JS call that absolutely doesn't do what you think it does. 这是一个古老的,过时的JS调用,它绝对不会执行您认为的操作。 If you thought it wrote data into the page, then you can yell at whoever told you to use it: that is not what it does. 如果您认为它会将数据写入了页面,那么您可以大喊大叫,告诉它使用它的人:这不是它的作用。 What it actually does is pump data into an active data stream, and if there isn't one, it makes a new data stream for the browser to work with . 它实际上所做的是将数据泵入活动数据流,如果没有数据流,它将为浏览器创建一个新的数据流 That means that if you call it any time after your page has loaded, it wipe the entire page clean, and starts a new write stream for the browser to decode. 这意味着,如果在页面加载后的任何时间调用它,它将清除整个页面,并启动新的写流供浏览器解码。 You page will be gone. 您的页面将会消失。 It's a terrible function and you should never, ever, use it. 这是一个可怕的功能,永远不要使用它。

(There are times when you do want to use it. Those times are extremely rare, and usually very low level and almost always related to workin on the browser as a file system or stream interpreter. And even then typically it's a bad idea) (有时您确实想使用它。这些时间很少见,通常级别很低,并且几乎总是与在浏览器中作为文件系统或流解释器进行工作有关。即使那样,通常这也是一个坏主意)

What you actually want is DOM manipulation. 您真正想要的是DOM操作。 So instead of a MyJs.js with this: 因此,用这个代替MyJs.js

function MyJsFnct() { 
  document.write ("Now inside JS function (MyJsFnct)</br></br>");
} 

you actually want this: 您实际上想要这样:

function MyJsFnct() { 
  var p = document.createElement("p");
  p.textContent = "This paragraph was written by my JavaScript function";
  document.body.appendChild(p);
}

This builds a new paragraph the proper way, assigns it some text content (don't be tempted to use innerHTML if there is no HTML. And if there is HTML, you're probably unwittingly baking in a potential exploit right there). 这将以正确的方式构建一个新段落,并为其分配一些文本内容(如果没有HTML,请不要尝试使用innerHTML 。如果有HTML,您可能会不知不觉地就被那里的潜在漏洞利用)。 Then the paragraph is added to the end of your page. 然后将段落添加到页面的末尾。 Done. 做完了

Finally, don't use <br> elements. 最后,不要使用<br>元素。 This is a holdover from when we didn't have very useful CSS, and we needed special elements to add vertical spacing. 这是我们没有非常有用的CSS时的一个保留,我们需要特殊的元素来添加垂直间距。 We do that with CSS now, and <br> is literlly for when you need a semantic line break. 我们现在使用CSS进行处理, <br>非常适合需要语义换行的情况。 So not visually, but for when a machine reader should see that a line has to be terminated early and resumed a next line for whatever reason. 因此,这不是视觉上的问题,而是机器读取器应看到某行必须尽早终止并出于任何原因而恢复下一行的情况。 Under normal circumstances, there are no such reasons. 在正常情况下,没有这种原因。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM