博客园 使用ifream的两种方法

  |  
阅读次数
  |  
字数 340
  |  
时长 ≈ 2 分钟

作为博客平台,发现博客园可能出于安全考虑,并不支持正常的iframe嵌套。

但是经过研究发现还是可以通过两种特殊途径在自己博客使用iframe进行嵌套。

1)字符串拼接

一个正常的iframe结构如下,如果直接将下面的代码作为变量,对html元素进行拼接的话是行不通的。

1
2
3
4
5
6
7
8
9
10
var ifr = "<iframe 
        width='100%'
        height='600'
        class='share_self'
        frameborder='0'
        scrolling='no'
        src='http://widget.weibo.com/weiboshow/index.php
        ?language=zh_cn&width=0&height=600&fansRow=2&ptype=1&speed=0&skin=1&
        isTitle=1&noborder=0&isWeibo=1&isFans=0&uid=3424286664&verifier=3c8ebf87&dpc=1'></iframe>";
$("#tmp").after(ifr);

但是可以通过下面的方法实现。

1
2
3
4
5
6
7
8
9
10
11
12
var ifr = "<ifr";
ifr += "ame
      width='100%'
     height='600'
     class='share_self'
     frameborder='0'
     scrolling='no'
     src='http://widget.weibo.com/weiboshow/index.php
     ?language=zh_cn&width=0&height=600&fansRow=2&ptype=1&speed=0&skin=1&
     isTitle=1&noborder=0&isWeibo=1&isFans=0&uid=3424286664&verifier=3c8ebf87&dpc=1'></ifr";
ifr += "ame>";
$("#tmp").after(ifr);

2)使用createElement

1
2
3
4
5
6
7
8
9
var iii = document.createElement('iframe');
iii.src = 'http://widget.weibo.com/weiboshow/index.php
            ?language=zh_cn&width=0&height=600&fansRow=2&ptype=1&speed=0&skin=1&
            isTitle=1&noborder=0&isWeibo=1&isFans=0&uid=3424286664&verifier=3c8ebf87&dpc=1';
iii.height = 600;
iii.width = '100%';
iii.className = 'share_self';
iii.scrolling = 'no';
$("#tmp").after(ifr);

使用以上两种方法就可以在博客园嵌套iframe了。