Question

我需要将以下HTML片段附加到文档中，用值替换display_spinner param：

<script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/viz_v1.js"></script>
<div class="tableauPlaceholder" id="tableauPlaceholder" style="visibility:hidden;width:654px; height:1469px;background-image: url('http://tableau.russellchristopher.org:81/Background.gif'); top: 0px; left: 0px; width: 100%; margin-left: 76px;">
    <noscript>
        <a href="#"><img alt="Analytics, Inc. " 
                    src="http://tableau.russellchristopher.org:81/Background.gif" 
                    style="border: none" /></a>
    </noscript>
    <object class="tableauViz" width="654" height="1469" style="display:none;">
        <param name="host_url" value="http%3A%2F%2Fpublic.tableausoftware.com%2F"
        />
        <param name="site_root" value="" />
        <param name="name" value="AnalyticsIncJavaScript&#47;AnalyticsInc" />
        <param name="tabs" value="no" />
        <param name="toolbar" value="yes" />
        <param name="static_image" value="tableau.russellchristopher.org:81/Background.gif"
        />
        <param name="animate_transition" value="yes" />
        <param name="display_static_image" value="yes" />
        <param name="display_spinner" value="" id="display_spinner" />
        <param name="display_overlay" value="yes" />
        <param name="display_count" value="yes" />
    </object>
</div>

以下是我的想法（JSFiddle：http://jsfiddle.net/9vBGq/）

$(document).ready(function () {
    var $placeholder = $('<div class="tableauPlaceholder" style="width:654px; height:1469px;background-image:  url("http%3A%2F%2Ftableau.russellchristopher.org:81%2FBackground.gif"); top: 0px; left: 0px; width: 100%; margin-left: 76px;"></div>'),
        $noscript = $('<noscript> <a href="#"><img alt="Analytics, Inc. " src="http%3A%2F%2Ftableau.russellchristopher.org:81/Background.gif" style="border: none" /></a></noscript>'),
        $tableauViz = $('<object class="tableauViz" width="654" height="1469"></object>'),
        $host_url = $('<param name="host_url" value="http%3A%2F%2Fpublic.tableausoftware.com%2F">'),
        $site_root = $('<param name="site_root" value="" />'),
        $sheetName = $('<param name="name" value="AnalyticsIncJavaScript&#47;AnalyticsInc" />'),
        $tabs = $('<param name="tabs" value="no" />'),
        $toolbar = $('<param name="toolbar" value="yes" />'),
        $static_image = $('<param name="static_image" value="http://tableau.russellchristopher.org:81/Background.gif"/>'),
        $animate_trasnsition = $('<param name="animate_transition" value="yes" />'),
        $display_static_image = $('<param name="display_static_image" value="yes" />'),
        $display_overlay = $('<param name="display_overlay" value="yes" />'),
        $display_count = $('<param name="display_count" value="yes" />'),
        $display_spinner = $('<param name="display_spinner" value="' + 'no' + '" />');
    $placeholder.append($noscript).append($tableauViz).append($host_url).append($site_root).append($sheetName).append($tabs).append($toolbar).append($static_image).append($animate_trasnsition).append($display_static_image).append($display_overlay).append($display_count).append($display_spinner).appendTo('body');
    console.log(document.body);
});

从我在console.log中看到的内容中，存在多个问题 - 我仍然对这些内容感到太新，无法确切知道原因：

enter image description here

我的<div>中的网址编码看起来很混乱。我做错了什么？
嵌套在noscript块中的<a>标记看起来很糟糕
在我列出我的参数

</object>

在我的每个参数上关闭/>都缺失了 - 再次进行网址编码奇怪，我假设但不确定如何处理。

我怀疑你是专业人士并在几秒钟内将我踢向正确的方向....请按你认为合适的方式踢我？谢谢。

Answer 1

我认为最好的解决方案是在你的html中创建一个模板并阅读它，而不是在javascript中创建..

像

这样的东西

<!-- template code follows -->
<script type="text/template" id="tableau">
<div class="tableauPlaceholder" id="tableauPlaceholder" ..
..snip..
        <param name="display_spinner" value="{placeholder}" id="display_spinner" />
..snip..
</div>
</script>
<!-- end of template -->

然后您需要此代码来加载模板并更改占位符

var template = $('#tableau').html(),
    filledTemplate = template.replace('{placeholder}','value for spinner');

$('body').append( filledTemplate );

演示 http://jsfiddle.net/gaby/9vBGq/1/

（我已从模板中删除noscript元素，因为所有内容都是通过脚本完成的）

Answer 2

我看起来的URL编码。我做错了什么？

你太早结束了这种风格。从背景图片网址中删除引号。

var $placeholder = $('<div style="background: url(some_very_long_url)"></div>')

在我列出我的参数后，它应该关闭时有一个结束标记

它已经关闭了。你所做的是将{（1}}的params附加到$placeholder，而不是$tableauViz如果你想要它们，你应该把它添加到它。

$tableauViz.append(stuff).append(some_more_stuff)

结束/＆gt;在我的每个我的params丢失 - 再次URL编码奇怪，我假设但不知道如何处理。

控制台在显示期间忽略/>。这很好，他们都是彼此的兄弟姐妹。如果不是，则每个参数都嵌套在前一个。

关于<noscript>，请关闭你的JS来测试它。这样，如果渲染得当，你可以看到它。

Jquery .append和appendto（）悲伤

2 个答案: