regarding alternative option to iframe?

Question

I am doing a project with my client in which I want open multiple website on single page on browser, for this purpose I used iframe but, I was stuck during openerp frame. In iframe I have set openerp screen also, but problem is that when I create a customer as soon as it gets to the creating time, the wizards are not opened.

Some of the code is here:

<iframe src="http://localhost:8069" name="mainFrame" >

I would like to know of an alternative to <iframe>

iframes are generally bad user experience. Use a normal HTML element and change its content dynamically thoguth AJAX. Also, consider reading [ask] and visiting the [help]. Your question could be phrased a lot better if I understand it correctly. "please give me" is generally regarded rude here - phrase your question as well.. a question. — Benjamin Gruenbaum, Oct 30 '13 at 09:59
but just be away of the cross domain issues that exist when using ajax — Hello-World, Oct 30 '13 at 10:11
check this out http://stackoverflow.com/questions/15146578/alternative-to-iframe-to-pull-in-actual-data-from-an-external-website-or-form — Hello-World, Oct 30 '13 at 10:16
I'm a little confused about what your problem is. Could you make it more clear please? Thank you :) — www139, Oct 09 '15 at 22:58

score 4 · Answer 1 · edited Feb 01 '19 at 18:03

The ability to access multiple websites, in a browser, via javascript is heavily limited for security reasons. I'm going to call this idea of displaying other webpages via javascript an iframe imitator. For this application, I would set three categories of sites:

Host Site: on the host site, an iframe imitator can be made with a simple ajax request. This is kid's stuff.
1st Party Site (Other than Host): On any site where you have access to server configurations (or at least can modify headers), you will need to specify the header Access-Control-Allow-Origin: "host site name here" to allow the host site's access or Access-Control-Allow-Origin: * to allow every site's access.
3rd Party Site: On third party site's you will have to hope that the site's Access-Control-Allow-Origin header is set to * or else you will need to convince the site's administrators to make an exception and allow your site's access.

If none of the above conditions can be met, then you will be at the mercy of the user's browser security. Some browsers support CORS (Cross Origin Resource Sharing), but it is not dependable. Typically, a user's browser blocks access to certain headers (for security reasons), but if the browser provides support (or has loose enough security), then the headers can be set to trick other sites into giving you access. Be aware that (if allowed) some might consider this borderline hacking, and it probably shouldn't be used without the permission of all parties involved.

$(document).ready(function() {
  var target_domain = "www.web-source.net";
  var protocol = "http://";
  var path = ""; //e.g. "/index.html"
  var target_host = protocol + target_domain;
  var target_URI = target_host + path;
  var method = "GET";
  $.ajax({
    url: target_URI,
    type: method,
    headers: {
      "X-Requested-With": "", //nullifies the default AJAX value of "XMLHttpRequest"
      "Origin": target_host, //lies to the target server
      "Referer": target_host, //lies to the target server
      "X-Http-Method-Override": method, //forces the specified method
    },
    crossDomain: "true" //applies cross domain settings
  });
});
$(document).ajaxSuccess(function() {
  $("#iframe_imitator").html(xhr.responseText);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="iframe_imitator"></div>

score 3 · Answer 2 · edited Oct 12 '21 at 03:30

3

I found this in this post - might be worth a try

Alternative to iFrames with HTML5

<object data="http://www.web-source.net" width="600" height="400">
        <embed src="http://www.web-source.net" width="600" height="400">
        Error: Embedded data could not be displayed.
    </object>

edited Oct 12 '21 at 03:30

Karan Dhir

731
1
6
24

answered Oct 30 '13 at 10:19

Hello-World

9,277
23
88
154

score 1 · Answer 3 · edited Oct 30 '13 at 14:54

1

I think you can use jQuery load:

<div id="divId"></div>
<script type='text/javascript'>
    $(document).ready(function (){
        $('#divId').load(URL of target);     
    });
</script>

edited Oct 30 '13 at 14:54

Peter Mortensen

30,738
21
105
131

answered Oct 30 '13 at 10:22

Mike Phils

3,475
5
24
45

Mehul Tandale · Answer 4 · 2013-11-01T07:10:54.347

1

You can use Ajax or jQuery as an alternative to iframe. I feel jQuery would be much simpler. You can implement it simply as:

$('#SampleElement').load('YourURL');

Here, SampleElement is the ID of the given element.

edited Nov 01 '13 at 07:10

answered Oct 30 '13 at 10:28

Mehul Tandale

331
1
5
17

regarding alternative option to iframe?

4 Answers4