我将为不同的网站免费出售这个小部件。检查小部件的以下链接。
我想要做的就是编写这样的代码,以便从托管服务器到客户端网站加载交叉域,而不会弄乱客户端网站的当前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屏幕截图