如何在html代码里面调用javascript变量？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在html代码里面调用javascript变量？相关的知识，希望对你有一定的参考价值。

我定义了一个变量：
<script language="javascript">
Arrhtml=new Array();
Arrhtml[0]="mypic.jpg"
</script>
我现在想在html代码中调用Arrhtml[0]，
<IMG src="Arrhtml[0]">
怎么样对src赋值才是正确的？谢谢各位帮助！

<script language="JavaScript">
Arrhtml=new Array();
Arrhtml[0]="mypic.jpg"
</script>
<img src="" onerror="javascript:this.src=Arrhtml[0];"> 参考技术A lyqpido的答案第一个方法未必是楼主想要的 第二个永远也无法运行 因为onload事件必须是图片装载成功之后才会激活onload事件的

第一个答案貌似可以 但是实际上不行的 我做过测试 会导致一个Javascript溢出的异常 所以也不行的

下面给出一种测试通过的方法 可以直接在Tag里面赋值属性：
<script language="JavaScript">
Arrhtml=new Array();
Arrhtml[0]="mypic.jpg"
</script>
<img id=htmlImage SRC="javascript:eval('htmlImage .src=Arrhtml[0]');">
这个方法主要就是先给图片设定一个id 通过设置这个id的属性予以实现 而不调用事件 对于开发者而言比较易懂

当然 这个方法也有缺点 那就是只能在IE里面使用 Mozilla类型的浏览器是不支持的本回答被提问者采纳 参考技术B 我提供两种方法：
1、（ASP测试通过）
<script LANGUAGE="JScript" RUNAT="Server">
function pido(v0)

str="./pic/fillgoogb2.gif";
str="./pic/fillgoogb1.gif";
if(v0==1)
return str;
else if(v0==2)
return str1;

</script>
我现在想在html代码中调用Arrhtml[0]，
<IMG src="<%
response.write pido(1)
%>">
2、<IMG src="" onload="javascript:this.src=Arrhtml[0];"> 参考技术C <IMG src="" onload="javascript:this.src=Arrhtml[0];">

如何在 JavaScript 中调用 Python 变量？

【中文标题】如何在 JavaScript 中调用 Python 变量？【英文标题】：How to call Python variable in JavaScript? 【发布时间】：2018-10-23 00:11:31 【问题描述】：

我有一个返回一些值的 Python 函数。我还连接到我的项目 Google Charts。所以我需要将该值传递给 Google Charts 的 html 文件中的 js 函数。顺便说一句，该项目在 Django 上。

最正确的方法是什么？

%  extends "gappi_tmp/wrapper.html" %

% block content %

<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', 'packages':['corechart']);
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() 

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['lol',11], // The variable should be here, instead of '11'
          ['Eat',   11] // Here another variable
        ]);

        var options = 
          title: 'Inbox | Outbox'
        ;

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      


    </script>
  </head>
  <body>
    <div style="padding-top: 5px; background: cornflowerblue; width: auto; height: 300px;" id="piechart"></div>
  </body>

% endblock %

【问题讨论】：

【参考方案1】：

您应该使用 context 呈现您的模板： https://docs.djangoproject.com/en/2.0/ref/templates/api/#rendering-a-context

将上下文传递给模板的方法取决于您的视图是如何编写的。

基于功能的视图

将 context 字典传递给 render() 函数： https://docs.djangoproject.com/en/2.0/topics/http/shortcuts/#optional-arguments

from django.shortcuts import render

def my_view(request):
    # View code here...
    context = 'foo': 'bar'
    return render(request, 'myapp/index.html', context=context)

基于类的视图

编写您自己的add_context_data() 方法实现：https://docs.djangoproject.com/en/2.0/topics/class-based-views/generic-display/#adding-extra-context

from django.views.generic import DetailView
from books.models import Book, Publisher

class PublisherDetail(DetailView):

    model = Publisher

    def get_context_data(self, **kwargs):
        # Call the base implementation first to get a context
        context = super().get_context_data(**kwargs)
        # Add in a QuerySet of all the books
        context['book_list'] = Book.objects.all()
        return context

将key: value 上下文传递给模板后，您应该像这样在模板中使用它： key 。 https://docs.djangoproject.com/en/2.0/topics/templates/#variables

<script type="text/javascript"> 
   var a = " key|escapejs ";
</script>

escapejs 模板过滤器是防止可能的 XSS 漏洞所必需的。如果需要传递 JSON，可以查看 Django 票证#17419

【讨论】：

【参考方案2】：

如果您想在单独的 js 文件中访问 python 变量。您可以使用 python vars 的值定义 js 全局变量，然后在单独的 js 文件中访问这些全局变量。

【讨论】：

【参考方案3】：

在 Django 中动态生成上述页面，包括来自您的 python 代码的必要 json 数据对象

来自here

【讨论】：

【参考方案4】：

如果您的 html 文件中有 js 文件，并且不在单独的 js 文件中，因为通过上下文传递的变量在渲染中可用模板，您可以这样进行。

通过上下文将所有变量发送到模板之后。

var jsVariable = 'django_value';

var data = google.visualization.arrayToDataTable([
    ['Task', ' task_variable '], // as string
    ['lol',lol_variable], // as integer
    ['Eat',   eat_variable ]
]);

你也可以循环播放。

var data = google.visualization.arrayToDataTable([
    % for item in queryset % // % for item in json_response %
        ['Task', ' task.attribute '],
    % endfor %  // % endfor %
]);

基本上，你必须知道你可以使用它，这取决于你真正想做什么。

【讨论】：

以上是关于如何在html代码里面调用javascript变量？的主要内容，如果未能解决你的问题，请参考以下文章

如何调用js文件

java如何调用javascript的函数

在HTML中，如何写js代码（或者别的）以实现flash的点击事件

如何在php里调用js文件

html页面中的php代码中如何调用js变量

如何在html网页中调用JS函数