javascript 在 iframe 外打开一个弹出窗口，但链接在 iframe 内
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16475678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
open a popup outside the iframe but link is inside the iframe
提问by supersaiyan
In a html page i have include one iFrame.
在 html 页面中，我包含了一个 iFrame。
In iFrame, have one link,
在 iFrame 中，有一个链接，
<a href="#" class="modal {targetelement:'#newstyle',closetext:'Close details',opentext:'View details'}">open window</a>
if i am adding the link and popup html on parent window its working fine.
如果我在父窗口上添加链接和弹出 html，它工作正常。
but if i am adding link on inside the iframe popup html is not opening.
但如果我在 iframe 弹出窗口中添加链接，则 html 不会打开。
My exact requirment : open the popup above the iframe.
我的确切要求：打开 iframe 上方的弹出窗口。
i can move the position of popup html ( inside iframe or parent page ) anywhere but cant change the position of <a href="#" id="modelboxnew">open window</a>its should be in iframe only
我可以将弹出 html 的位置（在 iframe 或父页面内）移动到任何地方，但不能改变它的位置<a href="#" id="modelboxnew">open window</a>应该只在 iframe 中
Here is my popup
这是我的弹出窗口
<div id="newstyle" > xyax text ..my popup html </div>
采纳答案by Alconja
Your iframe is effectively a completely different page, so it's probably not working because your modal javascript doesn't exist in the iframe's page. That being said, even if you moved all your javascript inside the iframe, lauching the modal from in there would keep it trapped within the iframe.
您的 iframe 实际上是一个完全不同的页面，因此它可能无法正常工作，因为 iframe 的页面中不存在您的模态 javascript。话虽如此，即使您将所有 javascript 移动到 iframe 中，从那里启动模态也会使其被困在 iframe 中。
Instead you want all your javascript and modal html/css stuff in the parent window and then from your iframe link call a popup launch function that exists in the parent window. So without knowing your exact code or what frameworks you're using, the basic idea in simple terms is to do the following (assuming jquery since you tagged the question as such)...
相反，您希望父窗口中的所有 javascript 和模态 html/css 内容，然后从您的 iframe 链接调用存在于父窗口中的弹出启动函数。因此，在不知道您的确切代码或您使用的框架的情况下，简单来说的基本思想是执行以下操作（假设 jquery，因为您将问题标记为这样）...
In your main window:
在您的主窗口中：
<script type="text/javascript" >
function showPopup() {
$("#newstyle").dialog();
}
</script>
...
<div id="newstyle" > xyax text ..my popup html </div>
In your modal:
在您的模态中：
<script type="text/javascript">
$(function() {
$("#modelboxnew").click(function() {
parent.showPopup();
});
});
</script>
...
<a href="#" id="modelboxnew" >open window</a>
Note that you need to be in control of both the main page & the iframe and they need to be hosted from the same domain for this to not be blocked by the browser's security.
请注意，您需要控制主页和 iframe，并且它们需要从同一域托管，以免被浏览器的安全性阻止。
回答by drtechno
I ran into this when I was making a post style feed dialog where I would click the "hearts" and it would show an iframe of the people who loved it. The popup dialog would show when the user clicks on a picture and it would give them a popup with a link to that picture's profile page, and a link to message. I pass a variable to the parent iframe to make the links work. Here is where I got the popup example I used: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
我在制作帖子样式提要对话框时遇到了这个问题，我会在其中单击“心形”，它会显示喜欢它的人的 iframe。弹出对话框会在用户点击图片时显示，它会给他们一个弹出窗口，其中包含指向该图片的个人资料页面的链接以及指向消息的链接。我将一个变量传递给父 iframe 以使链接工作。这是我使用的弹出示例的地方：https: //www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
in my outer iframe I put the popup right next to the iframe the pictures are getting rendered. then I use java to trigger it. the only thing I had to do was change the javascript portion that I left in the loved post iframe to the new location of the popup container. The java call gets rendered during the mysql result loop phase.
在我的外部 iframe 中，我将弹出窗口放在正在渲染图片的 iframe 旁边。然后我使用java来触发它。我唯一需要做的就是将我在喜欢的 post iframe 中留下的 javascript 部分更改为弹出容器的新位置。在 mysql 结果循环阶段期间呈现 java 调用。
<?php
if ($count>0){
echo '<div style="max-width:10em;"><table border=1 style=" border-color:#696969;">';
while ($data = $result->fetch_row()) {
echo '<tr>';
for ($m=0; $m<$result->field_count; $m++) {
if ($m=="0"){
$picSrc= $data[$m];
}else if ($m=="1"){
$usrName=$data[$m];
}else if ($m=="2"){
$userRec= $data[$m];
}
}
echo '<td style="background-color:#eac3a8;"><img src="'.$picSrc.'" onclick="myFunction('.$userRec.','.$usrName.')"> <br>';
echo '</tr>';
}
echo '</table></div>';
$result->close();
} else {
echo "No one has loved this posted";
}
// since I am rendering dynamically, I need to encapsulate the JavaScript into php, and pass the link html to the popup.
//$pstId is my id for the posting in the feed
echo '<script>
function myFunction(a,b) {
var userRec=a;
var usrName=b;
var links=" <a href=\'visitprofile.php?usr="+userRec+"\' target=\'_blank\'>Visit "+ usrName + "\'s Profile</a> <br> <a href=\'messagethem.php?usr="+userRec+"\' target=\'_blank\'>Send "+ usrName +"a message </a>";
var popup = parent.document.getElementById("'.$pstId.'");
popup.innerHTML=links;
popup.classList.toggle("show");
}
</script>';
This is in the parent iframe:
这是在父 iframe 中：
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
}
</style>
// then the span id is dynamically generated.
<div class="popup"><span class="popuptext" id="myPopupxs43vbty"></span></div>
