使用javascript将.php加载到div中
[英]using javascript to load a .php into a div
问题描述
PLEASE NOTE: I cannot use jquery or ajax to do this! 
请注意：我不能使用jquery或ajax来做到这一点！
This app is for dealing with clients face to face: with it I can show them many themes as an illustration of webpages. 这个应用程序是面对面地与客户打交道：有了它我可以向他们展示许多主题作为网页的插图。 They get to choose which theme they want. 他们可以选择他们想要的主题。 These themes contain tab templates and button templates, breadcrumbs all sorts of combinations that are used for any web-page depending on what they need. 这些主题包含选项卡模板和按钮模板，面包屑可用于任何网页的各种组合，具体取决于他们的需求。 If it is for a blog then the templates are blog-centric; 如果是博客，则模板以博客为中心; if it is commercial selling products the like then the pages (or rather examples that look like webpages which are rendered within the main div) may have an template using jquery or ajax of one 如果它是商业销售产品之类的那么页面（或者更像是在主div中呈现的网页的例子）可能有一个模板使用jquery或ajax的一个
I am making an app that puts php switch onto a page that contains 10 variations on a theme. 我正在制作一个应用程序，将PHP切换到一个包含10个主题变体的页面。 It is all inside a div as a page without the head tags (they are already used); 它都在div里面，没有head标签（它们已被使用）; the themes come from drop down lists (strung out on a bar near the top of the page). 主题来自下拉列表（在页面顶部附近的栏上排列）。
THE REASON I CAN'T USE JQUERY/AJAX I can't use these because there are now various versions of these used for the templates that are already in my themes. 我不能使用JQUERY / AJAX的原因我不能使用这些，因为现在有各种版本的这些用于我的主题中已经存在的模板。 If more than one version of jquery or ajax are used on the same page and they are different versions then they conflict with one another and don't work properly or not at all. 如果在同一页面上使用了多个版本的jquery或ajax，并且它们是不同的版本，那么它们会相互冲突并且无法正常工作或根本不工作。
I have managed to get this far only using php. 我已经设法只使用PHP获得这一点。 I can use a switch for the themes using ten cases per page works well and with each drop down list I have another 10 pages on each list and so one list = 100 so with only 5 lists there is 500 varitions of web-pages (which means over 2000 can be on the drop down list bar so this is essential for my app to have). 我可以使用一个开关用于主题使用每页十个案例运行良好，每个下拉列表我在每个列表上有另外10个页面，因此一个列表= 100所以只有5个列表有500个网页的变体（其中意味着超过2000可以在下拉列表栏上，所以这对我的应用程序来说是必不可少的）。 this is a actually a simple way of doing it and without the complication of the various versions of jquery and ajax that are used now I would be able to use jquery to solve this problem. 这实际上是一种简单的方法，并且没有现在使用的各种版本的jquery和ajax的复杂性，我将能够使用jquery来解决这个问题。
YES I HAVE SPENT MANY HOURS AND DONE MUCH SEARCHING FOR A SOLUTION BUT ALL FIND ON ANY SEARCH IS SOMEONE ADVISING THE PERSON LOOKING FOR A SOLUTION TO USE AJAX OR JQUERY. 是的，我已经花了很多时间并且已经找到了解决方案，但是在任何搜索中找到的都是有人建议寻找使用AJAX或JQUERY的解决方案的人。
I am new to javascript so am asking how to get my .php document with the switch function into the main div onscreen (each case of the switch has an example of a theme, that renders in html) so can be put within the main div from the drop-down list. 我是javascript的新手，所以我问如何将我的.php文件与开关功能放到屏幕上的主div中（每个开关的情况都有一个主题的例子，在html中呈现）所以可以放在主div中从下拉列表中。
Here's a simple example of what I need to do and how far I have got so far: 这是一个简单的例子，说明我需要做什么以及到目前为止我已经做了多少：
<?php
?>
<html><head>
<title>Test Includes</title>
</head>
<body>
<div id="content" style="margin: 0 auto;">
<style type="text/css">
#nav{ list-style:none; font-weight:bold; margin- bottom:0px;float:left;width:100%;position:relative;z-index:5;}
#nav li{float:left;margin-right:1px;position:relative;}
#nav a{display:block;padding:1px;color:#fff;background:#333;text-decoration:none;}
#nav a:hover{color:#fff;background:#aaa;text-decoration:underline;}
/*==== DROPDOWN ====*/
#nav ul{background:#fff;
background:rgba(255,255,255,0);
list-style:none;position:absolute;left:-9999px; }
#nav ul li{padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */float:none;}
#nav ul a{white-space:nowrap; }
#nav li:hover ul{ /* Display the dropdown on hover */left:0; }
#nav li:hover a{
background:#aaa;text-decoration:underline;}
#nav li:hover ul a{
text-decoration:none;}
#nav li:hover ul li a:hover{ background:#333;}
</style>
<div id="linker" style = "position:absolute; float:left;top:0;left:0;margin: 0 auto;height:30px">
<ul id="nav">
<li>
<a href="#">pages</a>
<ul>
<li><a href="includes/inc_page1.php">page 1</a></li>
<li><a href="includes/inc_page2.php">page 2</a></li>
<li><a href="#" onclick='changeText()'>page example</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
function changeText(){
document.getElementById('target').innerHTML = 'includes/pager00.php';
}
</script>
<div id = "target" style = "position:absolute;top:50; left:20px; width:85%;height:300px;padding:5px; border: 1px solid red;">
</div></div>
</body></html>
SO THERE ABOVE IS AN SHORTER EXAMPLE OF WHAT MY INDEX PAGE IS. 所以上面是我的索引页面的一个较短的例子。 below is the pager00.php which is a shortened example of my switch. 下面是pager00.php，它是我的开关的缩写示例。 I want this example to render within the div in the example above. 我希望这个例子在上面的例子中的div内呈现。 Here is the switch in a shortened version without any templates and as an example of what I want to do. 这是一个缩短版本的开关，没有任何模板，作为我想要做的一个例子。
pager00.php example:
<div>
<!--========== THESE LINKS WOULD NEED TO BE INSIDE THE DIV AND A CLICK BRINGS A THEM ONTO THE PAGE ====>
<p style="text-align: center;"><a href="?pmode=one">Pick Me</a> | <a href="? pmode=two">No Pick Me</a> | <a href="?pmode=three">NO! PICK ME!!!</a></p>
<?php
$closediv = "</div>";$closebody = "</body>"; $closep = "</p>";$closeh1 = "</h1>"; $closeh2 = "</h2>"; $closeh3 = "</h3>";
$closeh4 = "</h4>"; $closeh5 = "</h5>"; $closeh6 = "</h6>";$closespan = "</span>"; $closeli = "</li>"; $closeul = "</ul>";
$closea = "</a>"; $break = "</br>"; $wrapperend = "</div>";
$c1heading = "hiho";
$c1text = "hiho, it's off to work we go";
$c2heading = "hiho hiho";
$c2text = "hiho hiho";
$c3heading = "hiho";
$c3text = "hihohihohiho hiho ";
$styler01 = '<LINK REL=StyleSheet HREF="plonkone.css" TYPE="text/css" MEDIA=screen />';
$styler02 = '<LINK REL=StyleSheet HREF="plonktwo.css" TYPE="text/css" MEDIA=screen />';
$styler03 = '<LINK REL=StyleSheet HREF="plonkthree.css" TYPE="text/css" MEDIA=screen />';
class tagClass { public $prop1; public function __construct() { } public function __destruct() { }
public function setProperty($newval) { $this->prop1 = $newval; } public function getProperty() { return $this->prop1; } }
$obj =new tagClass();
if(isset($_GET['pmode']))
if ($_GET['pmode'])
{
$pmode = $_GET['pmode'];
switch($pmode)
{
case 'one' :
// ===== CHANGING THE STYLE ON EACH CASE IS WHAT CHANGES THE THEME ITSELF IN MY APP ======>
echo $styler01;
$tag = 'div';$id = 'caseone';$style = 'cone';$tagger = '<%s id="%s" class="%s">';
$obj->setProperty(sprintf($tagger, $tag, $id, $style));
echo $obj->getProperty();
$tag = 'h3';$tagger = '<%s >';
$obj->setProperty(sprintf($tagger, $tag ));
echo $obj->getProperty(); echo $c1heading; echo $closeh3;
$tag = 'p';$tagger = '<%s >';
$obj->setProperty(sprintf($tagger, $tag ));
echo $obj->getProperty(); echo $c1text; echo $closep; echo $closediv;
break;
case 'two' :
echo $styler02;
$tag = 'div';$id = 'casetwo';$style = 'ctwo';$tagger = '<%s id="%s" class="%s">';
$obj->setProperty(sprintf($tagger, $tag, $id, $style));
echo $obj->getProperty();
$tag = 'h3';$tagger = '<%s >';
$obj->setProperty(sprintf($tagger, $tag ));
echo $obj->getProperty(); echo $c2heading; echo $closeh3;
$tag = 'p';$tagger = '<%s >';
$obj->setProperty(sprintf($tagger, $tag ));
echo $obj->getProperty(); echo $c2text; echo $closep; echo $closediv;
break;
case 'three' :
echo $styler03;
$tag = 'div';$id = 'casethree';$style = 'cthree';$tagger = '<%s id="%s" class="%s">';
$obj->setProperty(sprintf($tagger, $tag, $id, $style));
echo $obj->getProperty();
$tag = 'h3';$tagger = '<%s >';
$obj->setProperty(sprintf($tagger, $tag ));
echo $obj->getProperty(); echo $c3heading; echo $closeh3;
$tag = 'p';$tagger = '<%s >';
$obj->setProperty(sprintf($tagger, $tag ));
echo $obj->getProperty(); echo $c3text; echo $closep; echo $closediv;
break;
}
}
?>
</div>
Above is an example of what I need to come into the div: I need this switch with the links to each separate switch-case content. 以上是我需要进入div的示例：我需要此开关以及指向每个单独的switch-case内容的链接。 It works fine on it's own but need it to come inside the div in the index page example. 它在它自己的工作正常，但需要它在索引页面示例中的div内。 the pager itself needs to be bought into the div. 寻呼机本身需要被买入div。 The javascript is just an example of what I want it doesn't work as is. javascript只是我希望它不能正常工作的一个例子。 I only get 'includes/pager00.php' printed although it does end up inside of the div I need the pager00.php script to render and not just those words... OBVIOUSLY 我只打印'includes / pager00.php'虽然它最终在div内部我需要pager00.php脚本来呈现而不仅仅是那些单词...显而易见
<script type="text/javascript">
function changeText(){
document.getElementById('target').innerHTML = 'includes/pager00.php';
}
</script>
IS NOT WHAT i NEED. 不是我需要的东西。 the javascript .innerHTML is not the right thing to use here. javascript .innerHTML在这里使用不正确。
So what is? 那是什么？ this is my Question how do I do this with straight javascript and no jquery or ajax? 这是我的问题我怎么用直接的javascript和没有jquery或ajax这样做？
1 个解决方案
解决方案1
2 2013-10-25 02:59:47
I don't really understand why you can't use ajax here. 我真的不明白为什么你不能在这里使用ajax。 This will work on all newish browsers (IE7+): 这适用于所有新的浏览器（IE7 +）：
function changeText() {
var obj = new XMLHttpRequest();
obj.onreadystatechange = function() {
if(obj.readyState == 4) {
document.getElementById("target").innerHTML = obj.responseText;
}
}
obj.open("GET", 'includes/pager00.php', true);
obj.setRequestHeader("Content-Type", "text/plain");
obj.send("");
}
Scripts returned by the php may not run, but the html will be put inside your div. php返回的脚本可能无法运行，但html将被放入你的div中。 This is the function behind AJAX, but there's no libraries required and there will be no versioning difficulties; 这是AJAX背后的功能，但是不需要库，也没有版本控制困难; this function works all on its own. 这个功能可以单独使用。
If this doesn't work, can you say exactly why? 如果这不起作用，你能说出具体原因吗？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.