标签：
里面提到：
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两个元素
标签：
原文地址：http://www.cnblogs.com/fsong/p/5002367.html
