Forcing iFrame content displayed on its wordpress parent page

I am building a Wordpress multisite.

I have iframed several of my subsites. (You can have a look at http://www.koreaobserver.com)

Now I want people directly accessing to my subsites through google or other search engines automatically redirected to the parent site where the corresponding subsites are shown in an iframe.

There is a wordpress plugin called "force-frame," which "allows you to force your WordPress website inside an iframe in another website, with cross-domain support."

The plugin is supposed to do what I desire if it works. Nevertheless, i don't understand the plugin's installation instruction, which says "Add the following snippet inside the HTML of the parent."

HTML of the parent? I have no clue as to the html of the parent.

Could you explain on how to add a snippet inside the HTML of the parent and share your insight on how to make iframed subsites always displayed within the parent page?

  • Alexander
    • DEV MAN’s Mascot

    Hey there @icndream,

    I'd love to help look into this for you, however I won't be able to at your current membership level. Right now you have a single plan for "User Synchronization" so if you have any questions related to that plugin, please let us know and we'd be happy to assist.

    This kind of request would fall under "Your Wordpress Team" which is available for members at the gold level. To see a comparison of our membership levels, and find out about all the benefits you can checkout our plan page here:

    https://premium.wpmudev.org/plans/

    Thanks for being a WPMU DEV member. Let us know if we can be of any further assistance.
    Best regards,

  • Alexander
    • DEV MAN’s Mascot

    Hey there @icndream,

    Great to see you were able to get your account upgraded. I can certainly help you get this worked out.

    I've installed the force-frame plugin to take a look. First, explain the step in the instructions. The snippet they provide, is almost like an embed code for the sub site. It is what will pull in the subsite when they get to that particular page.

    Assuming the Parent site is also running Wordpress, you can follow these insctructions. If not, just let me know how your parent site is setup.

    1. Activate the plugin on the sub-site and copy the snippet
    2. Create a new page on the parent site named after the sub site.
    3. Switch the page editor to "text" mode, and paste the snippet. Then save the page.
    4. Click the "View Page" link, and copy the URL shown in your address bar.
    5. Head back to the sub site and paste the URL in the "parent URL" box
    6. Check the "absolute URL" option
    7. Save the force frame settings page.

    Now test it out. Try visiting both the subsite, and the page on your parent site. Using these steps I was able to get this working on my test site. The redirects work great.

    NOTE At this point, the iframe will simply be displayed in the content area provided by your default page template. If you'd like to change this, the next step will be creating a new page template. Just let me know what theme you're using, and I can take a look at what needs to be done to accomplish this.

    Best regards

  • icndream
    • Design Lord, Child of Thor

    I think I have followed your instructions

    My subsite is http://www.koreaobserver.com/ktube.

    So I made a page on the parent site http://www.koreaobserver.com/k_tube and pasted the snippet.

    Then I named the parent site went back to the site and pasted the address of http://www.koreaobserver.com/k_tube to in the "parent URL" box.

    Well, it does not work and I suspect it might have to do with extra /#/%23 put in the middle of the URL.

    Perhaps, I am having /#/%23 because I changed the permalink of the parent site to postname.

    I got 301 error after changing the permalink and installing the SEO Plugin, with which I tried to strip a part of the URL, such as blog, which repeatedly appears.

    Things got OK after i removed the SEO Plugin.

  • Alexander
    • DEV MAN’s Mascot

    Hello @icndream,

    Ok, let's tackle these issues one at a time, and we'll get your site back up and running.

    Just wondering what it means "Create a new page on the parent site named after the sub site."

    I see you're running multisite, but I was actually under the impression that you were trying to pull in external sites with the iframe in addition to your multisite at http://www.koreaobserver.com

    So are you trying to pull the subsites into the main site within the same network? That's what it looks like from the URL you just mentioned. In that case, you can't have a page name exactly like the subsite.

    If you simply, need to aggregate the posts, there are much better ways of doing this than suing an iframe - such as using our Post indexer plugin, and other plugins such as global categories and global tags. That way the content could be browsed on the subsites, or it can dynamically be pulled in from all the sites into the main site.

    Perhaps you could elaborate with your thoughts on this matter when you have time.

    For now, let's work on getting this site fixed. I'm not getting a redirect code when pulling up the homepage, so it's likely that a plugin is adding the hash symbol in javascript. Are there any other plugins you activated recently? Or have you turned on any particular them settings? Reverting these changes can get the site back to the normal URL.

    Some of these fixes might be easier if I could log into the site. Would you mind allowing me admin access? If so, you can send it in through our contact form:
    https://premium.wpmudev.org/contact/
    -Choose "I have a different question"
    -Include my name in the subject "Alexander Rohmann"
    -Include any relevant login information, and a link back to this thread.

    Thanks for being a WPMU DEV member. Let us know if we can be of any further assistance.
    Best regards,

  • icndream
    • Design Lord, Child of Thor

    Yes, the site is running on a multisite.

    I have tried to aggregate content to the main site and still plan to do so.

    But the big problem is that my subsites are quite complicated ones, including ones running on the jobroller theme, a youtube style theme, the answers theme and so one.

    Also I have experienced difficulties in displaying the aggregated ones in a visually pleasing manner.

    So in order to maintain consistency and show the subsites, I have decided to go with iframes as you can see from http://data.freelancer.com/project/4627552/Capture.JPG.

    I have sent you my IDs and PWs.

  • icndream
    • Design Lord, Child of Thor

    Dear Alexander Rohmann

    One more related request would be on removing /blog in the main site's permalinks.

    I read a thread on the wpmudev community in 2010 ( https://premium.wpmudev.org/forums/topic/33-permalinks-remove-blog) and followed the instructions given from Timothy Bowers's suggested link, http://praveenlobo.com/techblog/how-to-remove-the-blog-slug-from-the-permalinksurl-in-wordpress-multisite-installation-without-a-plugin/.

    I removed blog slug by going to "Network Admin » Sites » Move cursor over the main site name(/) » Edit » Settings » Scroll down to Permalink Structure and update it to /%postname%/ and click on Save at the bottom of the page."

    But if I go to "Network Admin » Sites » Move cursor over the main site name(/) » Edit » Settings » Scroll down to Permalink Structure," the blog slug continues to exist.

    Moreover, if I go to the Network Admin and its settings, i can see the blog slug reappearing.

    I really need to remove the blog slug. I hope you can provide some insight into it as you fixes the permalink problem.

    Regards.

  • Alexander
    • DEV MAN’s Mascot

    @icndream,

    I'm working on this at the moment, and have made some progress. The issue with the #/ was because you had force frame active on the main site. It should only be active on subsites. So the main site was redirecting to itself. This is likely what caused the redirect problem you had earlier.

    I'm looking at the other issues, and will update you soon.

  • Alexander
    • DEV MAN’s Mascot

    Ok, I was able to get this working.

    Several things to keep in mind:

    - I'd recommend to always use links to the subsite like this:
    http://www.koreaobserver.com/ktube
    Then let the sub site redirect back to the page at the URL (in this case http://www.koreaobserver.com/k-tube) This will help make sure you don't have nested iframes.

    - On the sub site navigation bars, avoid any links that go to other sites. Try to keep the links within the subsite itself - otherwise you could also end up with nested iframes.

    - On all the subsites, you will have /#/ in the URL. When users navigate to different pages in the iFrame, the URL will update like this "/#/sub-site-post" This is so the URL can still be shared if a user is viewing from an iframe sub site.

    You can use K Tube as an example to follow to get your other sites setup. Here are the instructions to do this process specifically on your site. (before the instructions were how I did it on my test site, which was a bit different)

    1. On the main site, create a new page. Set the slug for this page to something similar, but not identical to the actual site URL.
    2. Before saving the page, change the Template to "Full Width" You can find this setting under the "Page Atributes" panel (below the publish button)
    3. Copy the URL to the page you just created.
    4. Go to the sub site and activate the Force Frame plugin.
    5. Paste the URL for the page you just created into "Parent URL" Remember, this is the URL to the page on the primary site that will serve this subsite in an iframe.
    6. Enable the "Auto adjust height" option
    7. Place these values in "iFrame attributes"

    width=100%
    height=700px;
    scrolling=no

    8. Same the Force Frame settings.

    Now try it out! Let me know what you think here.

    Best regards

  • icndream
    • Design Lord, Child of Thor

    Thank you for your support. You solution works and the hash issue has also been solved.

    Now I understand what the developer of the plugin refers to the html of the parent.

    However, I need to push a little more.

    The width of the iframed content is narrower than that of the primary site.

    So I put the iframed content in a 5/6 row and I put a google sense ad next to it in a 1/6 row. (As you can see from http://www.koreaobserver.com/k_tube/)

    This seems to work very well both visually and commercially.

    I cannot let the iframed content to occupy the whole content area as it just looks out of place.

    Nevertheless, when I copied and pasted the URL of the previous K-Tube and other subsites, which I made a 5/6 and 1 1/6 row using Visual Vomposer and did some tweaks with a plugin called Advanced Iframe, things did not work quite the same.

    As for K-tube, instead of showing the video clicked, it shows the top page of the website.

    The video is played at the bottom with some duplicated content but you can only see it by scrolling.

    Similar problems occur with other subsites. Instead of showing the content, the browser shows the parent pages of the iframed subsites.

    Do you think I can keep the 5/6 and 1/6 rows.

    Perhaps the problem is occuring due to conflicts between Advanced Iframe and Forced Frame, both of which try to define properties of the iframed content, such as height and scrolling options.

    Lastly, is it necessary to paste a snippet as instructed by the Force Frame Content or I don't have to worry about it.

    I was wondering you forgot to mention it or you didn't mention it because I don't need to copy and paste the snippet.

  • icndream
    • Design Lord, Child of Thor

    I think I have come up with a temporary fix.

    I replaced the snippet of the Advanced iFrame with that of the Force Frame in the HTML of the parent.

    Now it works, though I miss some features of the Advanced iFrame, which I can no longer use.

    I think the conflict occurred because both of the plugins were trying to bring in the iframed content to the parent page.

    And as for the 5/6 and 1/6 rows, they appear to be working well.

    Thank you so much for your help, Alexander Rohmann.

    By the way, do you have some suggestion on removing the blog hash?

  • icndream
    • Design Lord, Child of Thor

    OMG! Something went wrong again.

    I accidently activated the force iframe plugin in the primary site.

    I got confused with the primary site and a subsite.

    So I deactivated the plugin at the primary site.

    But subsite links are now redirected to the top of the iframed page, rather than the specific one clicked.

    For instance, if I click on an image, it does not open the image. Instead it shows the main page of the subsite.

    Could you give me some tips on how to fix the problem?

  • Alexander
    • DEV MAN’s Mascot

    Hi @icndream,

    Glad I could help! I believe we were able to get all of this resolved over live chat this morning.

    Great to see your sub sites coming together, and that this is working. Just let me know if you have any more outstanding issues here, or we may be able to mark as resolved for now.

    Thanks for being a WPMU DEV member.
    Best regards,

  • icndream
    • Design Lord, Child of Thor

    Alex, I am still having a problem. You remember it magically worked, right?

    Well, I guess it worked because we used Chrome.

    For instance, if I google with key words "give it to me korea observer"

    You can come across with music videos of my http://www.koreaobserver.com site.

    But IE users cannot directly access to music videos as the front page of the iframe content is loaded, rather than a specific music videos clicked.

    Moreover, on Firefox, it leads to an 404 error.

    Nevertheless, the same links work fine on Chrome.

    I got very confused and wonder why it worked all of the sudden, but it seems it has got to do with browser issues.

    Any suggestion on how to tackle the problem?

    I saw a post which suggesting adding ('P3P: CP=“CAO PSA OUR”'); to fix it on IE.

  • icndream
    • Design Lord, Child of Thor

    Alex, sorry to bother you again.

    Last time, you managed to remove the scrolling bar in a iframed subsite.

    I have the same issue with another subsite, http://www.koreaobserver.com/job/

    I made sure all the settings are same as the one without a scrolling bar, but I still could not remove the scrolling bar.

    Could you kindly tell me how to remove the scrolling bar?

    I think you mentioned that the height coding was a little messed up, right?

  • Jack Kitterhing
    • Code Norris

    Hi there @icndream

    Thank you for the login details, as we talked about in live chat, I have taken a look and it looks like the scroll bar will also be there as long as the widgets are active as otherwise it can't display them, do you require those widgets?

    Could you remove, recent comments, recent posts on your site and see if that resolves the issue?

    Thank you!

    Kind Regards
    Jack.

  • icndream
    • Design Lord, Child of Thor

    Awesome!!!

    Jack. I removed the meta widget and the scrollbar has disappeared.

    Do you know why the meta widget causes a conflict?

    Also would you be able to fix the redirection error?

    Redirection works when using chrome, but IE redirects to the home page of the iframe content, rather than a specific link.

    Moreover, on Firefox, it leads to an 404 error

    If you test the following link, it will only properly work on Chrome.

    http://www.koreaobserver.com/ktube/sistar-%EC%94%A8%EC%8A%A4%ED%83%80-give-it-to-me-audio-dl/

    Sorry to throw too many questions at a time, but I am having trouble removing a row when viewed on mobile devices.

    I made a 5/6 and 1/6 row to put the iframed content and an 160/600 adsense ad.

    It works great on desktop computers, but the ad space is too small on mobile devices.

    So I know how to hide a specific ad by using the display:hide action.

    But I am wondering it will be possible to disable/remove rows on mobile devices for my responsive site.

    The following is an example of a 1/6 row or empty space i'd like to remove so that the iframed site is displayed in full width.

    https://blu158.afx.ms/att/GetInline.aspx?messageid=5f2623a5-db7e-11e2-b83c-1cc1de047156&attindex=0&cp=-1&attdepth=0&imgsrc=cid%3ainlineImage0&cid=6f10aec2c22f720e&blob=MHxDYXB0dXJlLmpwZ3xpbWFnZS9qcGVn&hm__login=icndream&hm__domain=hotmail.com&ip=10.15.144.8&d=d7064&mf=0&hm__ts=Sat%2c%2022%20Jun%202013%2020%3a59%3a53%20GMT&st=icndream&hm__ha=01_b7c254efa6906702e96af6347a583390112b687d43efc7180ae16aea6e6fd285&oneredir=1

  • Alexander
    • DEV MAN’s Mascot

    Hi @icndream,

    Good to see Jack was able to help you with this over live chat. I'm sorry for the delay getting back to you myself.

    Can you post another screenshot? That image link doesn't work. It looks like it's trying to link to the image directly in your hotmail/outlook inbox and would only work for you because you're logged in.

    As for the URL not working in Firefox, Force Frame is encoding the URL, but Firefox sees the % symbols and re-encodes them, which causes the 404. I looked into this, and the plugin doesn't have many options, nor could I figure out a workaround. The only solution I know of for this, is to avoid characters that require URL encoding in your permalinks.

    For example, this page works ok:
    http://www.koreaobserver.com/k_tube/#/hall-of-fame/psy/

    Thanks for being a WPMU DEV member. Let us know if we can be of any further assistance.
    Best regards,

  • icndream
    • Design Lord, Child of Thor

    The following is a link to the screen shot, http://www.koreaobserver.com/wp-content/uploads/2013/06/Capture5.jpg i filled the empty space with adsense units but only a portion of them are displayed s they are not responsive. Also Thx for explainning cause of conflict with firefox. It had % symbols because the original ur contained Korean characters. In other words, i can fix the problem thanks to u. hope it fixes problem with ie as well.

  • Alexander
    • DEV MAN’s Mascot

    Hi @icndream

    Good to hear you'll be able to get the characters worked out. The problem with your ads is that you're serving content that is set at 160px wide into a space the shrinks smaller than that.

    Unfortunately visual composer isn't intelligent enough to serve different content blocks depending on size. It will just reduce the width of the columns.

    I even tried using some CSS to have it push the ad to a new row if it starts getting cut off, but at that point the main content just has white space next to it.

    One thing you could try doing is placing the raw HTML in a different block type such as a content block. This would likely enforce the stacking, but then you'd have the skyscraper ad by itself below the content

    Best regards

  • icndream
    • Design Lord, Child of Thor

    Alex, thank you for the follow up.

    Yes, fixing the character problem was a big progress.

    I wouldn't have figured out what had gone wrong unless you pointed out the % issue with firefox.

    However, I am still struggling with the redirection issue on Internet Explorer.

    If a user clicks the URL of http://www.koreaobserver.com/ktube/hall-of-fame/sistar-hall-of-fame/ on IE 8.

    It is redirected to the home page of http://www.koreaobserver.com/k_tube/.

    This is problematic as users are directed to the main page, rather than a specific page that they clicked.

    In contrast, if you enter http://www.koreaobserver.com/ktube/hall-of-fame/sistar-hall-of-fame/ on chrome and firefox, it is properly directed to http://www.koreaobserver.com/k_tube/#/hall-of-fame/sistar-hall-of-fame/

    Do you have any insight into the issue. By the way, the redirection works on IE10.

    Also I really appreciate your kindness to look into the row issue.

    May I try your second option of "placing the raw HTML in a different block type such as a content block."

    You said this would likely enforce the stacking, but then you'd have the skyscraper ad by itself below the content.

    I think I know how to hide the skyscrapper.

    I have succeeded in removing the skyscrapper on the cellphone version
    by adding the following code.

    .vc_span2.wpb_column.column_container {
    display: none;
    }

    I'd appreciate it if you elaborate on how to "place the raw HTML in a different block type such as a content block."

  • Alexander
    • DEV MAN’s Mascot

    As for IE8, issue, can you try using the "Absolute URL" feature and see if that makes a difference?

    It looks like Force Frame javascript is trying to use features that aren't present in IE8, but the absolute URL could be a workaround. Let me know what you find out. I'm on a Mac at the moment, so I don't have a way to test in IE8, but wanted to at least share an idea in the meantime.

    I'd appreciate it if you elaborate on how to "place the raw HTML in a different block type such as a content block."

    Visual composer allows for different block types. So in the first row, instead of using the Raw HTML block on the right side, try something else. It's possible that it will accept a text block, or the block for Wordpress text widget. Visual Composer will allow certain block types to wrap around, while others don't.

    Best regards

  • icndream
    • Design Lord, Child of Thor

    FIY, what is strange is that redirection works even on IE8 with ordinary posts.

    For instance, I just created a post http://www.koreaobserver.com/answers/iframe-redirection-test-55 on a sub-site.

    And it is properly redirected to http://www.koreaobserver.com/answer/#/iframe-redirection-test-55/.

    However, when I just created a video post with the URL, http://www.koreaobserver.com/ktube/dalshabet-be-ambitious-look-my-legs-mv

    This is improperly redirected to http://www.koreaobserver.com/k_tube/.

  • icndream
    • Design Lord, Child of Thor

    Alex, something amazing happened.

    I changed it to "Absolute URL" but nothing happened.

    So I even switched the default "Fragment mode" to "Get" and the redirection is working.

    I wouldn't have come this far if you did not share your insight.

    Thanks a lot, though I cannot figure out what the difference between get and fragment one.

    The plugin manual reads, "The By default, force-frame will use the fragment part of the parent's URL to propagate the URL of your site; however, if the parent site must use its fragment for other purposes, force-frame can use a configurable GET parameter instead. Fragment mode is generally preferred because the parent doesn't reload each time the user navigates to a different URL in the iframe, while it does in GET mode."

    Now I will try your advice on visual composer and test my luck again.

  • Alexander
    • DEV MAN’s Mascot

    Oh ok, that makes sense. It has to do with saving bandwidth, but looks like it's only supported in newer browsers. The difference is that when you're clicking links within the iFrame, it's now doing a full refresh. So it will take a little longer for the pages to load as it's now retrieving everything, instead of just the parts that are changing.

    Good to hear it's working in IE8! Looking forward to see what you find out about the visual composer issue.

  • icndream
    • Design Lord, Child of Thor

    Thank you for the complement. Though it's my first website in 14 years, but I'm rather being ambitious with this site. I tried multiple single sites and other measures to integrate a number of unique sites, but had failed to maintain consistency while syncing user data and so on. I have been counting on multiste and iframe, and it seems they can live up to my expectations thanks to your wonderful support.

    It appears the rows, weather it is a text one or not, are responsive.
    But the 1/6 row goes underneath of the main row when the browser size is about 480 pixels or less.

    So it may only need a simple tweak to make the 1/6 row to go underneath of the 5/6 row.

    I will ask the question to the Visual Composer Staff.

    I will let you know what the Visual Composer Staff comes up with.

  • icndream
    • Design Lord, Child of Thor

    Another big progress has been made thanks to you Alex, without even having to ask Visual Composer staff.

    I played around with Visual Composer and found an option which allows me to change the default Mobile screen width of 480px to whatever I want.

    Now, the screen is much more friendly to ipad users.

    But I have encountered another problem, which I believe will be the last one.

    The code,
    `.vc_span2.wpb_column.column_container {
    display: none;} used to allow me to hide the 160/600 google ad.

    But strangely, google ads are not removed with the same code that worked after I have made a modication for the mobile screen width of Visual Composer pages.

  • Alexander
    • DEV MAN’s Mascot

    @icndream,

    I think I got this one! Since you were able to get it moved to the next row, you can use this CSS to hide it if it's on a smaller screen.

    @media (max-width: 1259px) {
    .vc_responsive div.vc_row-fluid div[class*="vc_span"].vc_ad_fix {
    display: none;
    }
    }

    Visual Composer will allow you to add a class to different elements, by clicking the "edit" button. I added a custom class of "vc_ad_fix" on the HTML block.

    I've tested the CSS above in my browser and it's working. You'll just need to place it with your other custom CSS rules to have it take affect.

    Best regards

  • icndream
    • Design Lord, Child of Thor

    Alex, thank you so much.

    The code you gave to me works!!!

    That certainly makes the website much more visually pleasing on mobile devices.

    But I am curious why I have to add .vc_responsive div.vc_row-fluid div[class*="vc_span"]. to make it work in front of .vc_ad_fix.

    I thought if you have a class with the name of .vc_ad_fix, you only have to write down vc_ad_fix {
    display: none;} to make it disappear.

    And I have one last question regarding iframe.

    All subsites work fine, except one, -- http://www.koreaobserver.com/jobs --
    which cannot adjust its height.

    I removed as many widgets possible to see whether it fixes the problem, but it didn't.

    As I said, all other sites work fine as to auto resize.

    There are quite a few articles regarding the automatically resizing iframe content, such as http://w3schools.invisionzone.com/index.php?showtopic=26417.

    But I am not quite sure how to apply any of those techniques to address my problem.

  • Alexander
    • DEV MAN’s Mascot

    I thought if you have a class with the name of .vc_ad_fix, you only have to write down vc_ad_fix {
    display: none;} to make it disappear.

    You're correct. I'm sorry about that. Adding the vc_ad_fix was an after thought in this case to make sure it can be specifically targeted. You could certainly do away with the other selector as you're saying.

    I'm actually not quite sure what's stopping the auto height on this iframe.

    @Jack Kitterhing
    Any ideas here?

    On this page: http://www.koreaobserver.com/job/

    We have a manually set height at the moment, but auto would be nice. I'm not sure how you figured out it was the widgets last time, so thought I'd check with you.

    Best regards

  • icndream
    • Design Lord, Child of Thor

    Alex, interestingly, the ad does not disappear with .vc_ad_fix {
    display: none;}. So I used the code you gave to me, .vc_responsive div.vc_row-fluid div[class*="vc_span"].vc_ad_fix {display: none;} and it worked.

    So I was curious why your code works whereas vc_ad_fix {
    display: none;} isn't suffice. BTW, I couldn't think of giving a class by using Visual Composer. I think it was the perfect way to address the issue.

    @Jack Kitterhing
    Yeah, you figured out how to auto adjust height by removing widgets.
    I still don't know how you were able to figure it out. Nevertheless, I'd appreciate if you take a look at my page, http://www.koreaobserver.com/job/ to see whether the height of the page can also be auto adjusted.

  • Alexander
    • DEV MAN’s Mascot

    @icndream,

    Hmm, maybe I can provide some more CSS insight then. This version might also work:

    @media (max-width: 1259px) {
    .vc_responsive div.vc_row-fluid .vc_ad_fix {
    display: none;
    }
    }

    When it comes to working with existing CSS, and adding your own rules, it depends on what rule is the most explicit. Sometimes doing "div.vc_ad_fix" instead of ".vc_ad_fix" can make a difference.

    Another thing you can do is force a CSS rule to always be used by adding the important flag. This is usually best avoided if you can, but it works. Here's an example:

    @media (max-width: 1259px) {
    .vc_ad_fix {
    display: none !important;
    }
    }

    On your site in particular, I actually just copied from the rule I saw being applied in Chrom Developer tools, and set the display property accordingly. Then I added the extra class for good measure so it wouldn't accidentally break anything else later.

    Take care

  • icndream
    • Design Lord, Child of Thor

    I'm sorry to say, but I have another question.

    Iframe sites are loaded fast on web browsers, but very slow on mobile phones.

    I suspect the iframe site is loaded after all of its content is downloaded.

    It takes several seconds to be able to see mobile content. All I can see on mobile phones for those precious time is the logo and search bar which are from the parent site.

    I think there is a simple code as <iframe onload="load()" ... which I believe ensure the iframe content to be simultaneously loaded with the parent site's content.

    I have tried CDN, Smush.it and many more to boost up the speed in hope that browsing experience on mobile users improves, but there has been hardly any improvement.

    Could you tell me what code I should embed and where to embed such a code to make iframe site loaded faster or simultaneously with the parent site?

  • Alexander
    • DEV MAN’s Mascot

    @icndream,

    I did some speed testing on your site using the ktube site. There are two reasons for the bottleneck.

    1. The use of iFrames will always slow you down.

    2. Too many web requests.

    To load that page, your site makes a total of 312 web requests and needs to download 2.4 mb of data.

    This is a very large amount of requests for a web site, so even with a CDN, you're actually going to be limited by the clients computer and what it can handle.

    Browsers limit concurrent downloads, so only a handful at a time will be downloaded simultaneously, and the rest will need to wait in line.

    Mobile devices have an even harder time handling that many requests, and even after the data has downloaded, it then needs to render the information. iFrames are actually quite resource intensive. Take a look at the chart on this article: http://www.stevesouders.com/blog/2009/06/03/using-iframes-sparingly/

    I see you already have caching enabled, and I do notice a pretty good performance increase from when I was working on the site several days ago, so you've actually come a good way already.

    Best regards

  • icndream
    • Design Lord, Child of Thor

    @Alexander Rohmann, thank you for your reply. I think my mobile version became intolerably slow and unstable after I installed a new plugin called menufication that I purchased from codecanyon. It took me nearly a week to figure out that the little plugin was a major cause of the problem for me.
    @Jack Kitterhing, any suggestions on optimizing the screen size for http://www.koreaobserver.com/jobs?

  • Alexander
    • DEV MAN’s Mascot

    @icndream,

    Any additional plugins with respect to iFrames will likely cause conflicts with Force Frame.

    Force Frame is responsible for creating the iFrame, and managing the URL and state of the site inside it. Any other iFrame plugins will likely disrupt this unless they are specifically designed to work together.

    I've spent some time looking into the auto height issue. The problem is that the auto height feature can not calculate the height of that site in particular. This looks like a bug in Force Frame, or that the theme on that site is changing the height somehow differently.

    I looked into coding a solution for this, but wasn't successful. I did however find that a height of about 810px is optimal for browsing the sub site, while a scrollbar will appear if you go to make a post.

    Best regards

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.