通过DOM将多行javascript添加到页面

时间:2016-12-15 05:39:57

标签: javascript dom

我正在修补一些事情,更多的只是尝试和学习DOM操作的工作方式。

    <script type="text/javascript">
(function()
{
        var config = {
        };
        var get = CKFinder.tools.getUrlParam;
        var getBool = function( v )
        {
            var t = get( v );

            if ( t === null )
                return null;

            return t == '0' ? false : true;
        };

        var tmp;
        if ( tmp = get( 'basePath' ) )
            CKFINDER.basePath = tmp;

        if ( tmp = get( 'startupPath' ) )
            config.startupPath = decodeURIComponent( tmp );

        config.id = get( 'id' ) || '';

        if ( ( tmp = getBool( 'rlf' ) ) !== null )
            config.rememberLastFolder = tmp;

        if ( ( tmp = getBool( 'dts' ) ) !== null )
            config.disableThumbnailSelection = tmp;

        if ( tmp = get( 'data' ) )
            config.selectActionData = tmp;

        if ( tmp = get( 'tdata' ) )
            config.selectThumbnailActionData = tmp;

        if ( tmp = get( 'type' ) )
            config.resourceType = tmp;

        if ( tmp = get( 'skin' ) )
            config.skin = tmp;

        if ( tmp = get( 'langCode' ) )
            config.language = tmp;

        // Try to get desired "File Select" action from the URL.
        var action;
        if ( tmp = get( 'CKEditor' ) )
        {
            if ( tmp.length )
                action = 'ckeditor';
        }
        if ( !action )
            action = get( 'action' );

        var parentWindow = ( window.parent == window )
            ? window.opener : window.parent;

        switch ( action )
        {
            case 'js':
                var actionFunction = get( 'func' );
                if ( actionFunction && actionFunction.length > 0 )
                    config.selectActionFunction = parentWindow[ actionFunction ];

                actionFunction = get( 'thumbFunc' );
                if ( actionFunction && actionFunction.length > 0 )
                    config.selectThumbnailActionFunction = parentWindow[ actionFunction ];
                break ;

            case 'ckeditor':
                var funcNum = get( 'CKEditorFuncNum' );
                if ( parentWindow['CKEDITOR'] )
                {
                    config.selectActionFunction = function( fileUrl, data )
                    {
                        parentWindow['CKEDITOR'].tools.callFunction( funcNum, fileUrl, data );
                    };

                    config.selectThumbnailActionFunction = config.selectActionFunction;
                }
                break;

            default:
                if ( parentWindow && parentWindow['FCK'] && parentWindow['SetUrl'] )
                {
                    action = 'fckeditor' ;
                    config.selectActionFunction = parentWindow['SetUrl'];

                    if ( !config.disableThumbnailSelection )
                        config.selectThumbnailActionFunction = parentWindow['SetUrl'];
                }
                else
                    action = null ;
        }

        config.action = action;

        // Always use 100% width and height when nested using this middle page.
        config.width = config.height = '100%';

        var ckfinder = new CKFinder( config );
        ckfinder.replace( 'ckfinder', config );
})();
    </script>

我想弄清楚该怎么做,是通过DOM将该代码添加到页面中。我知道如果我把这个函数放在一个&gt; JS文件中我就能做到,因为我知道如何调用.JS文件并正确加载它们。

如果我想直接在页面上编写该脚本(如图所示),我该怎么做?我找到了一些简单的例子,如下:

  window.onload = function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    var code = 'alert("hello world!");';
    try {
      s.appendChild(document.createTextNode(code));
      document.body.appendChild(s);
    } catch (e) {
      s.text = code;
      document.body.appendChild(s);
    }
  } 

但是当我在其中放置一个长的,多行的javascript块时,它似乎不起作用。我怎么能这样做?

1 个答案:

答案 0 :(得分:-1)

DOM是基于标记的标记结构。因此,定义的标签结构必须按照定义的顺序排列。 DOM中的所有内容都在标签中。如果您想在DOM中使用JavaScript,那么它也会添加到脚本标记中。 在此标记中,您可以将所有JavaScript放在页面中,并且只在您的页面中。

以下链接包含JavaScript JQuery示例,该示例是同一页面上的代码,它是一篇非常初学者的文章,详细介绍了如何在页面上使用脚本以及如何使用事件处理等。

JavaScript Basic Tutorial on JQuery and Event Handling