从Yii框架加载跨域小部件

时间:2014-06-28 05:10:55

标签: jquery yii widget cross-domain

我将为不同的网站免费出售这个小部件。检查小部件的以下链接。

我想要做的就是编写这样的代码,以便从托管服务器到客户端网站加载交叉域,而不会弄乱客户端网站的当前DOM元素

到目前为止,我通过以下代码实现了这一目标

我有Yii Framework为您提供控制器代码和视图,该视图作为部分返回并正确放置在页面上。唯一的事情是正在返回的视图有它的javascript库没有加载我假设在页面上并获得$ Undefined error

请尽量帮助我。

跨域网站,将以下javascript代码放入其网站

<?php
/**
 * Created by PhpStorm.
 * User: Insane
 * Date: 6/27/14
 * Time: 1:24 AM
 */

?>

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Web Widget Tutorial - Example 3 - Putting things together</title>
</head>
<body>
<h1 id="header">Web Widget Tutorial</h1>
<h2>Example 4 - Putting things together</h2>
<script type="text/javascript">
    (function() {

        // Localize jQuery variable
        var jQuery;

        /******** Load jQuery if not present *********/
        if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
            var script_tag = document.createElement('script');
            script_tag.setAttribute("type","text/javascript");
            script_tag.setAttribute("src",
                "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
            if (script_tag.readyState) {
                script_tag.onreadystatechange = function () { // For old versions of IE
                    if (this.readyState == 'complete' || this.readyState == 'loaded') {
                        scriptLoadHandler();
                    }
                };
            } else {
                script_tag.onload = scriptLoadHandler;
            }
            // Try to find the head, otherwise default to the documentElement
            (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
        } else {
            // The jQuery version on the window is the one we want to use
            jQuery = window.jQuery;
            main();
        }

        /******** Called once jQuery has loaded ******/
        function scriptLoadHandler() {
            // Restore $ and window.jQuery to their previous values and store the
            // new jQuery in our local jQuery variable
            jQuery = window.jQuery.noConflict(true);
            // Call our main function
            main();
        }

        /******** Our main function ********/
        function main() {
            jQuery(document).ready(function($) {

                /******* Load HTML *******/
                var jsonp_url = "http://localhost/yiiframework/web/index.php/Ads/index/?callback=?";
                $.getJSON(jsonp_url, function(data) {
                    $('#example-widget-container').html(data.html);// Till here it works fine load the html returned from yii framework
                });
            });
        }

    })(); // We call our anonymous function immediately
</script>
<div class="clearfix popup" id="example-widget-container"> </div>

</html>

这是我们从YII Framework获得的托管服务器控制器代码

<?php

class AdsController extends Controller
{
    public function actionIndex()
    {

        //$this->layout = 'adswidget';
        $data = $this->renderPartial('index',null,true);
        $res = json_encode(array("html"=>$data));
        echo $_GET["callback"]."(".$res.")";

    }

    public function actionAdv()
    {
        $this->layout = 'adsdiv';
        $returnHtml  = $this->render('adv');
        return $returnHtml;
    }
    // Uncomment the following methods and override them if needed
    /*

}

观看代码:

<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/style.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/print.css" media="print" />
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/ie.css" media="screen, projection" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/main.css" />


    <div id="slideup" class="clear adheader" title="Ads"><div id="adheader" class="adheader" onmouseover="Tooltip('Ads-Click to see')"></div></div>

    <div id="slidedown" style="">
        <div class="clear popup_content">
            <hr style="margin: 5px 0;"/>

<?php $this->widget('bootstrap.widgets.TbTabs', array(
                        'type'=>'pills',
                        'placement'=>'left', // 'above', 'right', 'below' or 'left'
                        'tabs'=>array(
                            array('label'=>'Promos', 'content'=> '<div class=\'clear \'>

                                <div class=\'left two\'>
                                <div class=\'left one\'>
                                    <div class=\'banner\' id=\'zone4\'>
                                    </div>
                                   <div class=\'socialmedia\' >
                                                                <span class=\'st_facebook\'></span>
                                                                <span class=\'st_twitter\'></span>
                                                                <span class=\'st_linkedin\'></span>
                                                                <span class=\'st_googleplus\'></span>
                                                                <span class=\'st_pinterest\'></span>
                                                                <span class=\'st_sharethis\'></span>
                                                                <span class=\'st_email\'></span>
                                                                </div>
                                </div>  
                                </div>
                                <hr></div>', 'active'=>true),
                            array('label'=>'News', 'content'=>'<div class=\'clear \'>
                                                    <div class=\'left two\'>
                                                    <div class=\'left one\'>
                                                        <div class=\'banner52\' id=\'zone29\'>
                                                        </div>
                                                         <div class=\'socialmedia\' >
                                                                <span class=\'st_facebook\'></span>
                                                                <span class=\'st_twitter\'></span>
                                                                <span class=\'st_linkedin\'></span>
                                                                <span class=\'st_googleplus\'></span>
                                                                <span class=\'st_pinterest\'></span>
                                                                <span class=\'st_sharethis\'></span>
                                                                <span class=\'st_email\'></span>
                                                                </div>
                                                    </div>  
                                                    </div>
                                                    <hr></div>'),
                            array('label'=>'Deals', 'content'=>'<div id=\'deals\' class=\'clear \'>

                                                            <div class=\'left two\'>
                                                            <div class=\'left one\'>
                                                                <div class=\'banner\' id=\'zone\'>
                                                                </div>
                                                                 <div class=\'socialmedia\' >
                                                                <span class=\'st_facebook\'></span>
                                                                <span class=\'st_twitter\'></span>
                                                                <span class=\'st_linkedin\'></span>
                                                                <span class=\'st_googleplus\'></span>
                                                                <span class=\'st_pinterest\'></span>
                                                                <span class=\'st_sharethis\'></span>
                                                                <span class=\'st_email\'></span>
                                                                </div>
                                                            </div>  
                                                            </div>
                                                            <hr></div>'),
                            array('label'=>'Testimonial', 'content'=>'<div class=\'clear \'>
                                                                <div class=\'left two\'>
                                                                <div class=\'left one\'>
                                                                    <div class=\'banner\' id=\'zone17\'>

                                                                    </div>
                                                                 <div class=\'socialmedia\' >
                                                                <span class=\'st_facebook\'></span>
                                                                <span class=\'st_twitter\'></span>
                                                                <span class=\'st_linkedin\'></span>
                                                                <span class=\'st_googleplus\'></span>
                                                                <span class=\'st_pinterest\'></span>
                                                                <span class=\'st_sharethis\'></span>
                                                                <span class=\'st_email\'></span>
                                                                </div>
                                                                </div>  
                                                                </div>
                                                                <hr></div>'),

                        ),
                    )); ?>
            </div>
    </div>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/oxtag/jquery.openxtag.min.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/oxtag/jquery.metadata.js"></script>
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/easyxdm/easyXDM.debug.js">
</script>
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/cycle.js"></script>
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>

<script>

    jQuery(document).ready(function(){
        jQuery("#slideup").click(function(){
            alert("adsasda");

            jQuery("#slidedown").slideToggle("fast",function(){
                    ("#slideup adheader").css='';
                }

            );
            if(jQuery('#slideup').text() == 'Latest Ads'){
                jQuery('#slideup').text('Latest Ads');
            }
            else
            {
                // $('#slideup').text('Latest Ads & Promos') ;

            }
        });
    });
</script>


<script>
    jQuery(document).ready(function() {

        jQuery('#slideup').click(function() {
            var $lefty = jQuery(this).next();
            $lefty.animate({left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0});
        });

        $('#slidemarginleft button').click(function() {
            var $marginLefty = $(this).next();
            $marginLefty.animate({marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 0});
        });



        jQuery('#slidewidthsome button').click(function() {
            var $some = jQuery(this).next(),
                someWidth = $some.outerWidth(),
                parentWidth = $some.parent().width();
            $some.animate({width: someWidth === parentWidth ? someWidth/2 : parentWidth - (parseInt($some.css('paddingLeft'),10) + parseInt($some.css('paddingRight'),10))});
        });
    });

</script>
<script>
    (function (jQuery) {


        jQuery(document).ready(function () {

            jQuery.openxtag('init', {
                delivery: 'http://beta.sensibleticker.com/ads/www/delivery',
            });
            jQuery('.banner4').openxtag('iframe', 4, {
                width: 250,
                height: 250
            });
            jQuery('.banner52').openxtag('iframe', 52, {
                width: 250,
                height: 250
            });
            jQuery('.banner29').openxtag('iframe', 29, {
                width: 270,
                height: 300
            });
            jQuery('.banner').openxtag('iframe', 4, {
                width: 250,
                height: 250
            });
        });

    })(jQuery);
</script>


<script type="text/javascript">
    /*<![CDATA[*/
    jQuery(function($) {
        jQuery('[data-toggle=popover]').popover();
        jQuery('body').tooltip({"selector":"[data-toggle=tooltip]"});
        jQuery('#yw0').tab('show');
    });
    /*]]>*/
</script>

当加载视图时,我相信它不会随之返回脚本。我附加了firebug屏幕截图

Cross Domain Web Widget Screen shot showing errors of jquery while loading

0 个答案:

没有答案