里面提到：
2)在iframe中调用父页面中定义的方法和变量：
parent.method
我采用iframe的父页面里面定义方法，在iframe中调用父页面的方法:
如
index.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xmlns:wb="http://open.weibo.com/wb">
3 <head >
4 <title>index.html</title>
5 <meta name="description" content="Hello world">
6 <meta property="og:type" content="article" />
7 <meta property="og:image" content="20151112160752.png" />
8 <!-- Magnific Popup core CSS file -->
9 <link rel="stylesheet" href="magnific-popup/magnific-popup.css">
10
11 <!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
12 <script src="http://ajax.useso.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
13
14 <!-- Magnific Popup core JS file -->
15 <script src="magnific-popup/jquery.magnific-popup.js"></script>
16 <style type="text/css">
17 .mfp-iframe-scaler iframe{
18 background: #FFFFFF;
19 }
20 </style>
21 <script type="text/javascript">
22 //iframe change Image and title
23 function iframeChange(title,image){
24 $(document).attr("title",title);
25 $("meta[property=‘og:image‘]").attr("content",image);
26 }
27 var pageTitle = "";
28 //使用jquery.magnific-popup.js
29 $(function(){
30 pageTitle = $(document).attr("title");
31
32 $(‘.iframe-popup-link‘).magnificPopup({
33 type: ‘iframe‘,
34 alignTop: true,
35 overflowY: ‘scroll‘, // as we know that popup content is tall we set scroll overflow by default to avoid jump
36 callbacks: {
37 close: function() {
38 $(document).attr("title",pageTitle);
39 }
40 }
41 });
42
43 });
44
45 </script>
46 </head>
47 <body>
48 <a data-mfp-src="test.html" href="javascript:void(0);" class="iframe-popup-link white-popup">Test</a>
49 </body>
50 </html>
test.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" >
3 <head >
4 <title>Home</title>
5 </head>
6 <body>
7 <h1>Test Page</h1>
8 <script type="text/javascript">
9 parent.iframeChange("Hellworld","http://localhost/123456.jpg");
10 </script>
11 </body>
12 </html>
为了避免出现"Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null""的问题
请把测试的网页放在apache或者nginx服务器的目录下
-------------------------------------------------调皮的分割线 T_T ------------------------------------------------------------------------------------
项目中是使用jquery magnificPopup 弹出iframe的形式显示产品内容，百度分享的按钮是在iframe中，facebook分享，没有图片和说明，只有域名和标题，测试之后，发现facebook 分享读取的资料还是来自iframe的父页面的meta descritption,og:image两个元素，iframe里面的内容是变化的，所以只能iframe在显示时操作父页面的title,og:image两个元素
时间： 2024-11-08 02:25:42