#jquery #yii #widget #cross-domain
#jQuery #yii #Виджет #междоменный
Вопрос:
Я собираюсь бесплатно продавать этот виджет для разных сайтов. Проверьте наличие виджета по ссылке ниже.
Все, что я хочу сделать, это написать такой код, чтобы этот виджет загружался с помощью междоменного с моего размещенного сервера на клиентский веб-сайт, не испортив текущие элементы DOM клиентского веб-сайта
Я сделал это до сих пор, выполнив следующий код
У меня есть фреймворк Yii, предоставляющий вам код контроллера и представление, которое возвращается как частичное, и оно правильно размещается на странице. Единственное, что возвращается, — это представление, которое имеет свои библиотеки на javascript, которые, как я полагаю, не загружаются на странице и получают ошибку $ Undefined
Пожалуйста, попытайтесь помочь мне в этом.
Междоменный веб-сайт, который разместит следующий код 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 amp; 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
