从iframe调用父级中的Fancybox
我有2个页面，分别是index.html和social.html。我清理了索引，只剩下了需要fancybox的jquery代码。我想要做的是在social.html中包含图像，当单击它时，它将打开fancybox并显示它，但是在index.html中而不是在iframe中。出现的错误是：
Uncaught TypeError: Property 'showImage' of object [object DOMWindow] is not a function
(anonymous function)social.html:103
onclick
这是我的index.html：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript">
function showImage(image) {
$.fancybox('<img src="img/' + image + '" alt="" border="0" />');
};
</script>
</head>
<body>
<iframe src="social.html" scrolling="no" border="0" width="579" height="505" allowtransparency="true"></iframe>
</body>
</html>
在IFrame页面中：
<img src="img/picture1.jpg" alt="" class="thumbs" onclick="parent.showImage('picture1.jpg');"/>
PS：两个页面都在同一个域上…编辑：video.js->这是从fancybox来的，我没有做。
jQuery(document).ready(function() {
$(".video").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 640,
'height' : 385,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
});
问题答案：
首先，您应该使用fancybox v2.x来无缝地执行此操作（修补fancybox v1.3.x并不值得）
其次，您需要在父页面和iframed页面这两个页面中都加载jquery和fancybox css和js文件，以便正确地超越fancybox，
因此在两个页面中，您至少应具有以下内容：
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />
和
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>
然后在您的iframed（子页面）页面中，您的脚本基本上是相同的（但具有适用于v2.x的fancybox选项…请在此处查看文档）
$(".video").click(function() {
$.fancybox({
'padding' : 0,
// more options (v2.x) etc
但是代替这个
$.fancybox({
做这个：
parent.$.fancybox({
然后fancybox将显示在父页面的iframed页面的边界之外
-
问题内容： 我该如何继承其父代的样式和javascript。 我努力了 但是，它会删除标签。此外，我看不到影响iframe的样式。 我是否有更好/其他的方法来解决这个问题？谢谢。 问题答案： 您可以通过在iframe中使用以下代码来“继承”父级的CSS： 在IE，Chrome和Firefox中对我来说效果很好。 关于JavaScript，我找不到直接将父JavaScript添加到iframe中的方
-
问题内容： 我想从iframe调用父窗口JavaScript函数。 问题答案： Call Me 参见window.parent 返回对当前窗口或子帧的父级的引用。 如果窗口没有父窗口，则其父属性是对自身的引用。 当在一个被加载的窗口，或者，它的父是与元件嵌入窗口的窗口。
-
问题内容： 基本上，我有一个嵌入页面的页面，并且有一些需要从父页面调用的JavaScript例程。 现在，相反的操作非常简单，因为您只需要调用，但是不幸的是，我需要恰好相反。 请注意，我的问题是不会改变的源URL的，但是调用在定义的函数。 问题答案： 假设您的iFrame的ID为“ targetFrame”，而您要调用的函数为： 您也可以使用代替访问框架。
-
我有两个组成部分： 父组件 子组件 我试图从Parent调用child的方法,我尝试了这种方法,但无法得到结果： 有没有办法从父级调用子级的方法？ 注意：子组件和父组件在两个不同的文件中。
-
问题内容： 我有两个组成部分。 父组件 子组件 我试图从父级调用孩子的方法，我尝试过这种方法，但没有得到结果 有没有一种方法可以从父级调用子级的方法？ 注意：子组件和父组件位于两个不同的文件中 问题答案： 首先，让我表示，这通常 不是 在React领域中解决问题的方法。通常，您要做的是将功能传递给道具中的子代，并传递事件中的子代的通知（或者更好的是：）。 但是，如果 必须 在子组件上公开命令式方法
-
问题内容： 我有两个组成部分。 父组件 子组件 我试图从父级调用孩子的方法，我尝试过这种方法，但没有得到结果 有没有一种方法可以从父级调用子级的方法？ 注意：子组件和父组件位于两个不同的文件中 问题答案： 首先，让我表示，这通常不是在React领域中解决问题的方法。通常，您要做的是在props中将功能传递给子级，并在事件中传递子级的通知（或者更好的是：）。 但是，如果必须在子组件上公开命令式方法，