I have a site on kiosk mode on chrome using iframe in which I am opening number of external sites. And each of the sites has their own links with target="_blank". I have no control on those external links.
I want to open all those external links inside iframe only or I would need to publish some message for those target=_blank links. I can't open new window on kiosk. I have searched so far and found it has to be some server side coding. Javascript won't be any help in that.
My iframe code:
navigateToExternal:function(href)
{
Engine.ui.openMenu();
Engine.ui.exit();
Engine.ui.mostRecentSection = "external";
$("a[data-navsection], a[href]").removeClass("disabled");
$("a[href='" + href + "']").addClass("disabled");
$(".footer").hide();
var sandbox = "sandbox=\"allow-forms allow-scripts allow-same-origin\"";
$("#content-container").append("<iframe id=\"contentFrame\" src=" + href + "\"" + sandbox + "></iframe>");
},
Any help or suggestion would be really great.
Thanks in advance!!
You can't, the parent page can't access the cross-site iframe and the iframe can't access the cross-site parent page.
This falls under the Same-Origin policy and can't be worked-around on the client-side. You could scrape those sites on the server and present them as your own, however I'm not sure how effective that will be.
If you're running on Chrome, you can try the html5 iframe sandbox attribute.
<iframe sandbox="allow-scripts allow-forms" src="..."></iframe>
More Reading
I get a work around on this and thought to share. We can pass a command line argument For Mac, open Terminal and run:
$ open -a Google\ Chrome --args --disable-web-security
and it will disable the Same-Origin-Policy and then we can make our required changes on cross site iframe.
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 want to show doc file on a browser. I am using Google Docs API with iframe. But it shows me error that google docs refused to connect. I want to get rid of this error kindly help me out..
Here is my code in php, $file is a variable where I am getting the file name and I have to concat it with my iframe..
echo '<iframe src="http://docs.google.com/gview?url=http://192.168.0.56/orangehrm/admin/images/"'.$file.'&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>';
Based from this blogpost - Embedding a Google Doc:
Google provides an iFrame to embed your Google Docs. By default, WordPress will strip out iFrame code for security reasons. The iFrame code will disappear when switching between Visual and Text mode or when Publishing. To prevent this, you will need to change the provided iFrame code.
For example:
Try to change:
to:
I would like to embed an iphone/smartphone simulator in my website. I found this one:
https://github.com/rioleo/web-iphone-simulator
After adding the files to my directories, and trying to embed it:
<div align="center"><iframe src="http://localhost:8080/iphone?url=mysite" width="540" height="900" frameborder="0"></iframe></div>
A blank frame shows up with the message "The server refused the connection".
What causes the problem, and does anyone know other free simulators that can be embedded in websites?
Maybe dynamically modifying the navigator.userAgent string using JS? Take a look here.
Have you tried with iphone.php?url=mysite instead iphone?url=mysite??
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
I'm working with php to make some web pages and I'm having a bit of struggle with a link I'm trying to make.
Basically I have my <a> set with target="_self" on it so that it stays on the same page. (Note the page is a new window and that I also tried using "_top" and "_parent")
<img src="<?php echo $donnees[0]['id2_pathImgMini'] ?>" width="75" height="75" />
This is said link in its php form.
<img src="../images/propriete/DosAssorti/mini/L482_mini.jpg" width="75" height="75" />
This is the result arcoding to the browser when showing the source code.(Across IE,Firefox,Chrome)
<a target="_blank" href="http://ordi-003/inclusion/fiche.dos.assorti.info.php?id=14&lan=fr">
This is the same line according to Firebug AND the Chrome developping tools.
When clicking the linking the expected result is opening the link on the same page, however it opens it in a new window. Changing inside firebug "_blank" to "_self" and clicking the link afterwards gives the good results and opens the link on the same page.
Am I doing something wrong? Am I incorrectly using the <a> here?
Should I look for another way to make my link? I'm pretty open to anything really I tried different things and looked alot on google but couldn't find people with the same problem. Firefox cache is deactivated so that should not be the issue. Tried it on another computer too and it gives the same results.
If I gave too short information just tell me what I should also include as I am new to stack overflow.
Edit:I forgot to say that if I remove the target parameter and just put none, the "source code page" doesn't show anything like it should but in firefug and chrome dev tools it shows a target="_blank" still. Also just a note, there is only 1 copy of this file and it is on the localhost of the machine running the local site. I'm directly editing that file.
Edit2: http://pastebin.com/yrAMQEL9 be aware the indentation is awful on pastebin for some reason.
You're running different code than the code you're editing. Make sure your changes are making it to the server you're visiting in the browser and that you're editing the right file.
I finally found what was causing the replacement of my _self.
In the footer there was a script which was referenced and trough further research I found this bit of code
jQuery('a[href^=http]:not(.in)').attr({
'target' : '_blank'
});
It caused the replacement of the _self to a _blank.
Now that I know where the problem came from I just have to check with the original coder of that function why he needed it and if it is still needed.
Thanks all for your help.