使用 Jquery 加载函数从空 div 中的另一个页面加载 div

Posted 2023-02-27

【中文标题】使用 Jquery 加载函数从空 div 中的另一个页面加载 div

【英文标题】：Loding div from another page in empty div, using Jquery load function

【发布时间】：2014-01-26 21:50:06

【问题描述】：

我已经对此进行了几天的研究，但我似乎无法从我网站上的另一个页面加载一个 div 并在我的页面上清空 div。最终，我正在处理在工具提示中打开的另一个页面的 div 结果，以便用户可以从链接列表中进行选择，但这是第一步。

我在这里创建了一个小提琴http://jsfiddle.net/Learjet/3Mxcc/9/ 和外部页面，这是我想做的事情所必需的。

这里有什么我遗漏的明显东西吗？

这是代码

html

<div id="links"> <a href="http://jsfiddle.net/Learjet/VrQj3/" data="http://jsfiddle.net/Learjet/VrQj3/">Antioxidants</a>
</div>
<div id="results_after_hover">
<!-- Need Results after hover Here -->
</div>

JQuery:

$('#links a[href]').hover(function () 
$("div#results_after_hover").load('http://jsfiddle.net/Learjet/VrQj3/embedded/result');
);

非常感谢您的智慧！

谦虚， EJ

【问题讨论】：

您忘记打开控制台

我觉得你很困惑。在您的示例中，“不同页面中的 DIV”并不完全是 DIV，而是指向 Fiddle 结果部分的 URL，它出现在 Fiddle 页面的一小块区域中，但使用 IFRAME 包含在其中。

【参考方案1】：

您可以使用这样的 iframe：

$("div#results_after_hover").html('<iframe src="http://jsfiddle.net/Learjet/VrQj3/embedded/result"></iframe>');

http://jsfiddle.net/XS7q2/

但它只会加载整个页面。不是页面内的特定元素。

【讨论】：

这可能是最明智和最快速的选择。您还可以尝试从代码隐藏加载页面并通过 AJAX 将其传输回来。这样可以只提取页面的特定部分（请参阅***.com/questions/14999573/…）

这是实际站点：foodmaster.com 在“浏览成分”框中，当您将鼠标悬停在其中的链接上时，我正在尝试在下一个获取“.DIRECTORIES-CHILDPRODUCTS”ul 的结果在弹出窗口中显示的页面（使用工具）。这样，用户可以跳过中间页面并直接进入实际的公司列表。我的第一步是正确调用，然后我想我可以设法在工具提示中获取它。感谢您的耐心朋友！

@Learjet - 如前所述，浏览器安全策略不允许使用 jQuery（或一般的 javascript）访问另一个页面内的内容。这就是说，您可能必须使工具提示生效的唯一希望是执行 Timothy Groote 在第一条评论中所说的：创建一个使用 AJAX 调用的服务器端页面。或者，您可以使用您需要隐藏的信息构建您的页面，然后按需显示。祝你好运！

【参考方案2】：

出于安全原因，您不得加载这样的其他页面。 如果您打开 Firebug，并检查控制台选项卡，您会注意到弹出错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access. 

只有在您尝试加载的页面发送access-control-allow-origin 标头时，您才能这样做。

如果您想知道如何操作，请查看this question on ***

【讨论】：

嗨蒂姆，源文件在同一个站点，它们都在小提琴上。不过感谢您的帮助。

如果您打开 jsfiddle 和控制台，您会注意到正在执行的页面实际上是从不同的子域 (http://fiddle.jshell.net) 调用的。这违反了跨域政策

（当然，我不知道这是否与您的实际项目相同，但仍然...看看您的控制台）

谢谢蒂姆！我没有注意到它是一个子域！我在源中的同一个域上使用它