2010-08-10 28 views
9

Ý của tôi là, một biến/mảng được khai báo và khởi tạo có thể được sử dụng trong HTML, bên ngoài các thẻ <script> không? Fx.Biến JavaScript có thể được sử dụng trong HTML thuần túy không?

<script type="text/javascript"> 
var foo = array('placeholder1', 'placeholder2'); 
</script> 

<body> 
<p><!--access the variable here-->foo[0]</p> 
</body> 

Bạn truy cập biến/mảng trong trường hợp này như thế nào? như thế này:

<p><script type="text/javascript">document.print(foo[0])</script></p> 

??

Trả lời

15

Hai cách để thực hiện việc này. Đây là một tốt hơn:

<script type="text/javascript"> 
// make sure to do this onLoad, for example jQuery's $() 
var foo = array('placeholder1', 'placeholder2'); 
document.getElementById("fooHolder").innerHTML = foo.toString(); 
</script> 
... 
<p id="fooHolder"></p> 

Hoặc bạn có thể làm theo cách này (trong đó, như Marcel chỉ ra, không hoạt động trong XHTML và thực sự không nên được sử dụng anyway):

<p><script type="text/javascript">document.write(foo)</script></p> 
+0

'document.write' không hoạt động trong XHTML: http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite –

+0

Đây là ví dụ tốt về cách đặt thẻ HTML để chứa biến JavaScript Nội dung. Nhưng nó không cho phép bạn chỉ định một biến JavaScript trong HTML tự động trả về nội dung của biến JavaScript. Câu trả lời đúng là những gì được hỏi không thể được thực hiện, nhưng đây là một cách tiếp cận thay thế. –

3

Bạn có thể làm một cái gì đó như thế này:

<script> 
    var str = 'hello there'; 
    document.getElementById('para').innerHTML = str; 
</script> 

nơi một phần tử có id đã chỉ định:

<p id="para"></p> 
0

Đó là cách trực tiếp duy nhất bạn sẽ truy cập nó ở nơi khác trong trang của mình. Bằng cách mở một thẻ tập lệnh khác và in nó.

Bạn cũng có thể sử dụng các phương pháp như innerHTML để đặt giá trị ở đâu đó.

0

Tôi không nghĩ rằng bạn có thể truy cập javascript từ html nhưng bạn có thể đặt innerhtml của đối tượng dom qua javascript để bạn có thể muốn đi theo cách khác. Đầu tiên tìm kiếm google tôi tìm thấy vì vậy tôi không thể hứa nó tốt nhưng nó có một mẫu nhanh chóng.

http://www.tizag.com/javascriptT/javascript-innerHTML.php

3

bạn chỉ đơn giản là không thể truy cập javascript bên ngoài biến của thẻ script, đó là vì,

  1. Html không công nhận bất kỳ biến nó chỉ làm cho các phần tử HTML được hỗ trợ
  2. biến được sử dụng để lưu trữ các biến tạm thời, đó là cho dữ liệu động, nếu bạn muốn một cái gì đó năng động hơn thì bạn có thể sử dụng PHP cho điều đó.
1

Không cần thiết tiết lộ chi tiết, nhưng sử dụng các phương pháp DOM chuẩn.

<script> 
    window.onload = function(){ 
     // you do not need to initialize like this, but I like to 
     var bar1 = new String('placeholder1'); 
     var bar2 = new String('placeholder2'); 
     var foo = new Array(); 

     // populate the Array with our Strings 
     foo.push(bar1); 
     foo.push(bar2); 

     // create an array containing all the p tags on the page 
     // (which is this case is only one, would be better to assign an id) 
     pArray = document.getElementsByTagName('p'); 

     // create a text node in the document, this is the proper DOM method 
     bar1TextNode = document.createTextNode(foo[0].toString()); 

     // append our new text node to the element in question 
     pArray[0].appendChild(bar1TextNode); 
    }; 
</script> 

<body> 
    <p></p> 
</body> 
0

Bạn thậm chí có thể biểu hiện AngularJS.

<html> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

    <script> 
     var app = angular.module('myApp', []); 
     app.controller('myCtrl', function($scope) { 
      $scope.framework= "AngularJS"; 
     }); 
    </script> 

    <body> 

     <div ng-app="myApp" ng-controller="myCtrl"> 
      <p>I want to use variables directly in HTML using: {{ framework }}</p> 
     </div> 

    </body> 
</html> 

Mã trên sẽ in ra "Tôi muốn sử dụng biến trực tiếp trong HTML bằng AngularJS" .Bạn có thể sử dụng dấu ngoặc đơn để viết biểu thức AngularJS. Ví dụ: {{expression}}.

Các vấn đề liên quan