5

I have two frames of which I copy the content of the first (myframe) to the second (myframe2) using JavaScript and set myframe2's src:

<iframe id="myframe" src="../Page1.aspx" width="100%" height="100px"></iframe>
<iframe id="myframe2"  width="100%" height="100px"></iframe>

<button onclick="myFunction();return false;">Try it</button>

<script>
    function myFunction() {
        var iframe1 = document.getElementById("myframe");
        var iframe2 = document.getElementById("myframe2");

        iframe2.contentWindow.document.body.parentElement.innerHTML = iframe1.contentWindow.document.body.parentElement.innerHTML;
        iframe2.setAttribute("src", iframe1.src);
    }
</script>

FrameSecond reloads after "src" attribute is set, but I don't need it to do so. Can anyone help me with this?

SND
  • 1,552
  • 2
  • 16
  • 29
Aliasghar Bahrami
  • 267
  • 3
  • 14
  • Don't you want to get updated `iframe` content ? – Rayon Jul 16 '16 at 07:21
  • yes i copy content from another frame – Aliasghar Bahrami Jul 16 '16 at 07:22
  • If _yes_, then it will have to get reloaded to get new src content... – Rayon Jul 16 '16 at 07:23
  • Change the html, not the src – freedomn-m Jul 16 '16 at 07:25
  • Is it possible change iframe src without reload iframe ؟ – Aliasghar Bahrami Jul 16 '16 at 07:35
  • 1
    What's the point of changing the `src` if not to cause a reload? An iframe's URL isn't displayed in the browser's address bar or anything, so how does changing the `src` help you? – nnnnnn Jul 16 '16 at 08:46
  • 1
    @nnnnnn You might have an iframe that dynamically loads content from someplace else, but not every part of the iframe is loaded from that source. For example the iframe might contain a form which is loaded from a different url, then it would make sense to ensure that the url for the iframe is the same as the post url for the form so that when the form is submitted, it goes to the right place. Also, if you want to create some animations when the frame is loading, this allows you to do that with ajax. If the form is refreshed however, you loose that effect. – smac89 Aug 22 '17 at 19:18

3 Answers3

5

Use replaceState(state, title, URL):

iframe2.contentWindow.history.replaceState('WhatEverNameYouWant', "", iframe1.src);
smac89
  • 39,374
  • 15
  • 132
  • 179
2

I had much the same problem. I needed to "know" what the location of the document loaded into my Iframe was, so I could show its location somewhere else. I had inputs which changed the location of the iframe by setting

myIFrame.src =  ...

This worked fine except then I realized when I clicked back- or forward -button the content of the IFrame changed, yet that did not (seem to) change the value of the src-attribute of the referring IFrame element. Same problem when I added links into the iframe documents to navigate between them.

My solutions was to in the onload-handler of the document loaded into the IFrame record the loaded URL into a field of the parent window. When the containing document needs to know what is loaded in the IFrame it consults that variable rather than rely on the .src -attribute of its IFrame -element, which seems to not be up-to-date with the actual contents of the iframe automatically.

BTW. I also tried explicitly setting the value of the .src -attribute of the iframe elemen from the onload -handler of the iframed document. That worked yes but caused a visible second load of the iframe contents. By using a separate explicit location to store the url of the document loaded into the iframe it does not get loaded twice, and everything works smoothly.

Panu Logic
  • 2,193
  • 1
  • 17
  • 21
0

Not really an answer to this question specifically, but maybe it's useful for someone.

I needed to pass the language to the Iframe, what worked for me was adding the parameter to the hash instead of the query string. because a hash change doesn't trigger a page reload in the Iframe:

e.g 'http://...?uiCulture=en' --> 'http://...#uiCulture=en'

Alexander Cosman
  • 1,117
  • 11
  • 20