使用锚定链接打开WordPress页面内的IFRAME

时间:2013-10-15 作者:Jason

我的问题:

如何创建指向非现场网页的锚定链接,当单击该链接时,会将非现场网页作为iframe打开,iframe位于新Wordpress页面内,其中Wordpress页眉和页脚保留,但iframe网页显示内容通常位于何处?

例如:

您有一个wordpress页面,其中包含一系列场外链接。每个链接都指向一个注册页面。注册页面由第三方网站托管。

____ get_header() ____
    Logo.png

____ get_the_content(); 
    Which class do you want to register for?

    Click here to register for Class A (link to 3rd party offsite webpage)
    Click here to register for Class B (link to 3rd party offsite webpage)

____ Wordpress Footer ____
    get_footer();
单击“单击此处注册B类”时,会打开一个新的Wordpress页面,如下所示。

____ get_header() ____
    Logo.png

____ 3rd party webpage
    <iframe>
        Please fill out this registration form to continue.

        Name: 
        Credit Card #:
    </iframe>

____ Wordpress Footer ____
    get_footer();
可能的方法:

这样是不是太过分了。。。

在页眉和页脚中创建一个新的主题页模板。然后在内容区域,从第三方链接解析出第三方网页url,并在通常显示帖子/页面内容的iframe中使用该链接。

在Wordpress中添加页面并分配新模板。永久链接:/注册页面

在包含第三部分链接列表的页面中,按如下方式构建锚定:

<a href="../reg-page?classID=1234">Click here to register for Class B</a>
主题页模板中:

// I know this is not legal code

/**
* Template Name: iframe fullwidth 
*/

get_header()

<div class="content-wrapper">
    <iframe src="3rdPartSite.com/ . $_GET["classID"] ." width="100%" height="100%"></iframe>
</div>

get_footer()

2 个回复
SO网友:daniel0mullins

我将采用以下两种方法之一:

使用target 属性以在iframe中打开它(在浏览器中不通用)

  • 使用JavaScript替换src iframe上的属性选项1:

    <a href="somethirdpartysite.com/reg" target="thirdparty">Register</a>
    <iframe name="thirdparty"></iframe>
    
    选项2:

    <a href="somethirdpartysite.com/reg" class="iframeit">Register</a>
    <iframe src="#" name="thirdparty"></iframe>
    
    <script>
         $(\'.iframeit\').click(function(event) {
             event.preventDefault();
    
             var theSrc = $(event.target).attr(\'href\');
    
             $(\'iframe[name="thirdparty"]\').attr(\'src\',theSrc);
         });
    </script>
    

  • SO网友:ayush rundla
    <a href="somethirdpartysite.com/reg" class="iframeit">Register</a>
    <iframe src="#" name="thirdparty"></iframe>
    
    <script>
         $(\'.iframeit\').click(function(event) {
             event.preventDefault();
    
             var theSrc = $(event.target).attr(\'href\');
    
             $(\'iframe[name="thirdparty"]\').attr(\'src\',theSrc);
         });
    </script>
    
    结束