I'm using JQuery to resize an iframe to make it have the same height as it's content, it works perfectly though it only works if the content is in the same domain.
I need to display external content so I'm making the iframe point to a file in my server which in turn should display the external content:
<iframe src="frame.php" scrolling="no" frameborder="0" noresize="noresize" style="width:100%; border: 1px solid black;">
How do I make frame.php display the content of the external domain?
In case you need more info here is the answer on how to do it (he explains everything excepts how to display content in the php file):
AutoHeight IFrame
Thanks
So you want to fetch the contents of an external site?
This will work, but it'll break the layout when the target page has non-absolute URLs and relative links:
frame.php:
<?php
echo file_get_contents($_GET['url']);
?>
<?php echo file_get_contents( "http://example.com" );?>
Somethhing like that will do
Unfortunately, php isn't the correct language to be doing this. In order to determine the height of the document in the iframe, you would need to make a javascript call from the parent document (where the iframe element is) to the document referenced in the src of the iframe.
In the case where the src of the iframe is on your domain, you have full permission to use the DOM of the document to get the document's height, as per the same origin policy. When you load a document from another domain, you do not have permission to query for the height. What the answerer of your question seems to be suggesting is setting up a proxy on your site so that the same origin policy would be circumvented.
However, there going to be other issues with that (ie relative links on the proxied page, etc.)
Related
I have an application form I need to work into an iframe, but I'm having a hard time with the links for it. Because the iframe was initially giving me errors, I started a work around by having a workaround.php file made that would be read as:
<!DOCTYPE html><html><?php echo file_get_contents($_REQUEST['url']); ?></html>`
Then in the iframe on my page I wrote:
<style><!--iframe.Application {
overflow: hidden;
}
--></style>
<iframe width="100%" height="800px" style="height: 100vh;" class="Application" scrolling="no" src="https://www.mywebsite/workaround.php?url=https://theotherwebsite.com"></iframe>
This worked out very well and I now had the form loading seamlessly onto my website. The next issue was that the links are not working. Any root-relative link within the iframe form was linking to "https://mywebsite.com/page2" rather than to "https://theotherwebsite.com/page2".
Now the manager of the website with the form would be able to change these relative links to absolute links, so this isn't a huge obstacle. To test if it would work, I edited the links in my browser to be an absolute to:
<a href="https://theotherwebsite.com/page2">
For this the iframe refused to connect. I'll need to continue to use workaround.php. Next I tried:
<a href="https://www.mywebsite/workaround.php?url=https://theotherwebsite.com/page2">
For a moment, I see the 2nd page load within the iframe, but then the page opens outside of the iframe in the same tab & window. Additionally, the page that loads is "https://www.mywebsite/workaround.php?url=https://theotherwebsite.com/page2"
At this point, I'm unsure of what link would function and stay within the iframe. I tried to add the "_parent" target.
<a href="https://www.mywebsite/workaround.php?url=https://theotherwebsite.com/page2" target="_parent">
but this changed nothing from my previous attempt. I tried likewise with _self and _top to find no change. _blank still functioned to open the page in a second tab.
At this point I'm not familiar enough with iframes to know what else to attempt. I hope my explanation of past attempts and results is easily understood. If any of you have a suggestion of what could be a solution please let me know!
TLDR: How do I open a link within an iframe of a php document without it opening a new tab?
I understand that an iframe is rendered by the browser engine
is there a way to render the full HTML on the server side and serve it to the front end?
I tried the PHP's file_get_contents() function and the srcdoc attribute for the iframe
This simply downloads the content of the page and makes it unusable
<?= file_get_contents('http://dns_blocked_by_isp.com'); ?>
And this renders a non-working iframe
<iframe srcdoc="<?= file_get_contents('http://dns_blocked_by_isp.com'); ?>"
frameborder=0 width=510 height=400 scrolling=no
allowfullscreen=allowfullscreen>
</iframe>
So am basically looking for an alternative of runat="server" in ASP.NET but for PHP if possible
Motivation:
My ISP blocked the DNS address where I get my iframe source from, but my server runs on a different region which means it can download the content just fine and the urls in the iframe has -cdn.com suffix which in turn is not blocked by the ISP
Thank you
To get around browser support issues, you'd probably be better off setting up a PHP proxy page (i.e. a script on your server that just fetches the remote page and serves the source directly as a page from your server), but I suspect that the issue you're running into is just that the " characters being returned from the remote page are breaking the srcdoc attribute. Let's say that the remote file looks like:
<p class="worldclass">Hello World</p>
Then your example would result in:
<iframe srcdoc="<p class="worldclass">Hello World</p>"
So the the value of srcdoc is just <p class=
You just need to escape the code appropriately:
<iframe srcdoc="<?= htmlspecialchars(file_get_contents('http://dns_blocked_by_isp.com')); ?>"
frameborder=0 width=510 height=400 scrolling=no
allowfullscreen=allowfullscreen>
</iframe>
I recently started a new position as a graphic designer for a local nonprofit. I have a little background in HMTL and CSS, but their website runs on PHP and I'm already struggling to work with the code.
I need to add an inline frame to embed a webpage within a specific page on our website. The programmers who built our site didn’t build a user friendly interface where we can embed HTML, so I'm told that I need to add the iframe snippet into the PHP for that page. However, the page I want to edit does not have it's own PHP file. It is a subpage under one of the site's main nav categories. I was able to find a PHP file which corresponds to that main nav category that this subpage falls under. I believe that this is where I would need to add the code. It appears to be a template which structures all of the pages inside of this broader nav category.
Can anyone help me with this? I'm not sure if you can just add HTML to a PHP file as is, or if it needs to be altered a bit. Also I need to know how I could have the PHP template selectively load the desired iframe only on the page that actually needs it - I don't want that iframe to appear in all the other pages that fall within the broader nav category.
The code I need to embed looks like this:
<iframe width="100%" height="800px" src="https://google.com" frameborder="0" scrolling="yes"></iframe>
you can use html as it is on php page.
point 2: you want to show iframe on specific page only...
e.g. on page xyz.php
<?php
$basename = basename($_SERVER['PHP_SELF']); /* Returns The Current PHP File Name */
if ($basename == 'xyz.php'){ ?>
<iframe width="100%" height="800px" src="https://google.com" frameborder="0" scrolling="yes"></iframe>
<?php } ?>
So what I want to do is create a subdomain on my website and have it load an external website into it without actually going to that website. For instance:
google.mydomain.com loads google.com but the URL bar reads google.mydomain.com.
How do I go about doing this?
I tried this but could not figure it out.
Trying:
iframe
I want page to take up the whole screen for each person's computer. Can I set it to 100% instead of x amount of pixels?
I want to remove scroll bars but it says not supported.
You can use either an Iframe, or file_get_contents();
Iframe:
<iframe src="http://google.com" style="width: 100%; height: 100%;">
file_get_contents():
<?php
echo file_get_contents('http://google.com');
?>
With file_get_contents(), you need to beware of the website you're fetching from using relative URL's, which will break the CSS, Images, Javascript, etc.
You are not going to be able to use php's include function, as this is not a resource residing on your server.
One option you could explore is loading everything in as the contents of an iframe: see http://www.w3schools.com/tags/tag_iframe.asp for some details about the iframe html element
iframe is now not supported in html5
it works on html5 also
Easy to add or remove
Example:
<body onload="window.location.href='https://www.google.com/'"> </body>
I have created a page in which I am showing A websites Page (situated some where on web );
I used iframe but puzzled with the height issues I solved width issues for 950px only with css3 but my need is full height as target website but that is not working with cross domain pages (I've done with same domain successfully).
Now I want to do it either with PHP using get_file_content() or some other putting it into div , iframe or in frames whatever works (and also pages must be accessible as it is from main sites)
The container will change its content with hyper link click.
Please help me to resolve the issues.
I've tried many more methods including jquery, js, php, css and blah blah blah with no success.
before commenting or answering please visit THIS LINK
I need some thing like this
Please check this and alter here
To See My page Click here
Note:
I have no access of target site so I can't put attributes on target
page and get back to iframe page.
I have 100+ pages to show so no
specific method can be used i need any generalized technology.
One more thing i don't want scrolling in my page.
Efforts done :
Ajax/Jquery
PHP Resize
In the "iframe'd" html, have:
<body onload="parent.resize_iframe(document.body.scrollHeight)">
and in the page that iframes:
<script type="text/javascript">
function resize_iframe(new_height) {
document.getElementById('iframed').style.height = parseInt(new_height, 10) + 60 + 'px';
}
</script>
I used 60px to fix potential padding etc.
Note that they have to be under the same domain for this to work, otherwise you might have to run:
<script type="text/javascript">
document.domain = "domain.com";
</script>
On either or both. This is required so that the browser may interact between them.
Do something like this:
<frameset rows="*">
<frame frameborder=0 src="http://www.discountautoparts.com/" scrolling="auto" noresize>
</frameset>
If you do that it should look like this picture